帝國cms的html頁面輸入框input的美化

2024-08-28 12:23:39

字體：大中小

來源：轉載

供稿：網友

input輸入框是網頁必不可少的組件，可是每個瀏覽器對于輸入框的顯示樣式各有不同

例如：

上圖分別就是谷歌瀏覽器和IE瀏覽器自帶顯示的輸入框，樣式也不足人意，所以大多都會自己寫樣式

以下是一個簡單的文本框樣式

            input{                 border: 1px solid #ccc;                  padding: 7px 0px;                 border-radius: 3px; /*css3屬性IE不支持*/                 padding-left:5px;             }

效果圖：

樣式屬性含義：

border: 1px solid #ccc;  /*設置輸入框邊框，邊緣線的顏色、大小、及實線虛線*/

padding: 7px 0px; /*設置輸入框高度，也可以用height，但是用height的話，輸入框的光標會置于頂部，還要設置其他樣式去固定，而且還不一定會兼容很好*/

border-radius: 3px; /*這個屬性石css3里面的,IE不支持*/

padding-left:5px;  /*讓廣告距離左邊5個像素，一開始光標是貼著左邊輸入框的邊緣的*/

基本上以上的樣式算是如今比較常用的了

然后就是input的一些其他的設置

比如：屬性 placeholder

這個屬性在輸入框里有提示文字效果，CSS3屬性，不支持IE

input點擊發光特效：

            input{                 border: 1px solid #ccc;                 padding: 7px 0px;                 border-radius: 3px;                 padding-left:5px;                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);                 box-shadow: inset 0 1px 1px rgba(0,0,0,.075);                 -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;                 -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;                 transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s             }             input:focus{                     border-color: #66afe9;                     outline: 0;                     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);                     box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)             }