精美而实用的网站，关注web编程技术、网站运营、SEO推广，让您轻松愉快的学习

我们在写表单的时候，经常需要自定义表单的样式，当然input输入框也不例外，那么如何能写出好看一点的输入框呢？文本框获取光标的时候如何美化它呢？

简单的表单HTML

<form action="" method="get">
    <div class="input_control">
        <input type="text" class="form_input" placeholder="Enter vendor key here"/>
    </div>
    <div class="input_control">
        <input type="text" class="form_input" placeholder="这里可以输入一些文字提示"/>
    </div>
    <div class="input_control">
        <input type="text" class="form_input" placeholder="这里可以输入一些文字提示"/>
    </div>
    <div class="input_control">
        <a id="btn1"><b></b>Join</a>
    </div>
    <div class="input_control">
        <a id="btn2"><b></b>Video Options</a>
    </div>
</form>

input获取光标时候的CSS样式

去掉默认样式代码：-web-kit-appearance:none; -moz-appearance: none;
input[type="text"],#btn1,#btn2{
  box-sizing: border-box;
  text-align:center;
  font-size:1.4em;
  height:2.7em;
  border-radius:4px;
  border:1px solid #c8cccf;
  color:#6a6f77;
  -web-kit-appearance:none;
  -moz-appearance: none;
  display:block;
  outline:0;
  padding:0 1em;
  text-decoration:none;
  width:100%;
}
input[type="text"]:focus{
  border:1px solid #ff7496;

以上CSS不支持IE6

如果是文本域，textarea:focus也可以实现文本域获取光标时候的样式。

placeholder的默认字体颜色是灰色，看起来有点浅，我们继续修改样式，那么如何修改placeholder的样式呢，代码如下

::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #6a6f77;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #6a6f77;
}
input::-webkit-input-placeholder{
  color: #6a6f77;
}

文本框失去光标怎么写呢？这的借助JS才能实现了，代码如下

$(document).ready(function(){
$("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).css({background:"#ccc", border:"1px solid #f00"})}).blur(function(){$(this).css({background: “#FFF”, border: “1px solid #ccc”})});
}) 
//还一种写法
$(document).ready(function(){
$("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).addClass("focus")}).blur(function(){$(this).removeClass("focus")});
})
Tags：input 光标