css搜索的文本框,一个很不错的CSS改写的大表单文本框和搜索按钮组
《一個很不錯的CSS改寫的大表單文本框和搜索按鈕組》要點:
本文介紹了一個很不錯的CSS改寫的大表單文本框和搜索按鈕組,希望對您有用。如果有疑問,可以聯系我們。
先看效果圖:
開始爬取CSS部分:/*大搜索框*/
.searchInputBox?{
height:?62px;
width:?810px;
margin:?0?auto;
border-radius:?6px;
background-color:?#ffffff;
Box-shadow:?0?5px?20px?0?rgba(51,?177,?255,?0.15);
border:?solid?1px?#33b1ff;
}
.searchInputBox?.input?{
display:?inline-block;
border-radius:?6px;
font-size:?16px;
width:?615px;
height:?60px;
border:?none;
outline:?none;
font-weight:?300;
padding-left:?20px;
}
.searchInputBox?.btn.button?{
height:?60px;
}
.searchInputBox?.btn?{
display:?inline-block;
width:?190px;
font-size:?18px;
cursor:?pointer;
position:?relative;
Box-shadow:?0px?2px?7px?0px?rgba(0,?0,?0.09);
text-align:?center;
text-decoration:?none;
color:?#fff;
line-height:?50px;
border-radius:?0?5px?5px?0;
background-color:?#33b1ff;
float:?right;
}
.searchInputBox??.button?{
background-image:?linear-gradient(#33b1ff,?#33b1ff),?linear-gradient(to?bottom,?#17c5ff,?#11c0fa),?linear-gradient(#11c4ff,?#11c4ff);
}
總結
如果覺得編程之家網站內容還不錯,歡迎將編程之家網站推薦給程序員好友。
本圖文內容來源于網友網絡收集整理提供,作為學習參考使用,版權屬于原作者。
總結
以上是生活随笔為你收集整理的css搜索的文本框,一个很不错的CSS改写的大表单文本框和搜索按钮组的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 旧式计算机,西雅图计算机博物馆 “复活”
- 下一篇: css层叠上下文详解,CSS定位(层叠上