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

首先我们看一下最后的效果图：

其实这个样式很简单，用到了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;   
    
}

因为我们鼠标移进去的时候，需要修改边框的颜色和一些阴影，所以上面的代码就够了！！

希望你们能从中得到启发。

转载于:https://www.cnblogs.com/Jimmy009/archive/2012/11/20/2778831.html