手把手教你做出好看的文本輸入框

首先我們看一下最后的效果圖：

其實這個樣式很簡單，用到了css的偽元素focus。

下面我們一起來重新做一個吧。

首先我們需要在你的頁面上添加一個文本框代碼如下:<input type="text" value="" />

這個是我們最平常的按鈕了，沒有任何的樣式。現在我們來添加我們好看的樣式，代碼如下：

.mytxt {
    color:#333;
    line-height:normal;
    font-family:"Microsoft YaHei",Tahoma,Verdana,SimSun;
    font-style:normal;
    font-variant:normal;
    font-size-adjust:none;
    font-stretch:normal;
    font-weight:normal;
    margin-top:0px;
    margin-bottom:0px;
    margin-left:0px;
    padding-top:4px;
    padding-right:4px;
    padding-bottom:4px;
    padding-left:4px;
    font-size:15px;
    outline-width:medium;
    outline-style:none;
    outline-color:invert;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    text-shadow:0px 1px 2px #fff;
    background-attachment:scroll;
    background-repeat:repeat-x;
    background-position-x:left;
    background-position-y:top;
    background-size:auto;
    background-origin:padding-box;
    background-clip:border-box;
    background-color:rgb(255,255,255);
    margin-right:8px;
    border-top-color:#ccc;
    border-right-color:#ccc;
    border-bottom-color:#ccc;
    border-left-color:#ccc;
    border-top-width:1px;
    border-right-width:1px;
    border-bottom-width:1px;
    border-left-width:1px;
    border-top-style:solid;
    border-right-style:solid;
    border-bottom-style:solid;
    border-left-style:solid;
}

好了我們添加了樣式以后，我們需要在文本框中引用此樣式。修改文本框代碼如下：<input type="text" value="" class="mytxt" />

好了我們基本的文本框樣式完成了，現在我們需要在次添加focus按鈕。首先簡單的介紹一下focus按鈕的作用：就是當我們箭頭在文本框中的時候觸發此樣式。

添加css樣式如下：

.mytxt:focus {
     border: 1px solid #fafafa;
    -webkit-box-shadow: 0px 0px 6px #007eff;
     -moz-box-shadow: 0px 0px 5px #007eff;
     box-shadow: 0px 0px 5px #007eff;   
    
}

因為我們鼠標移進去的時候，需要修改邊框的顏色和一些陰影，所以上面的代碼就夠了！！

希望你們能從中得到啟發。