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

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

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

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