Go语言视频零基础入门到精通

admin

我们在写表单的时候，经常需要自定义表单的样式，当然input输入框也不例外，那么如何能写出好看一点的输入框呢？
下面我们来写个简单的表单
  

1. <form action="" method="get">
2.     <div class="input_control">
3.         <input type="text" class="form_input" placeholder="Enter vendor key here"/>
4.     </div>
5.     <div class="input_control">
6.         <input type="text" class="form_input" placeholder="Enter room name here"/>
7.     </div>
8.     <div class="input_control">
9.         <input type="text" class="form_input" placeholder="Input key here if use encryption"/>
10.     </div>
11.     <div class="input_control">
12.         <a id="btn1"><b></b>Join</a>
13.     </div>
14.     <div class="input_control">
15.         <a id="btn2"><b></b>Video Options</a>
16.     </div>
17. </form>

复制代码

  
首先要将input输入框的默认样式去掉
  

1. -web-kit-appearance:none;
2.   -moz-appearance: none;

复制代码

然后我们加上边框和圆角，并设置input的高度和字体大小和颜色：
  
  

1. font-size:1.4em;
2. height:2.7em;
3. border-radius:4px;
4. border:1px solid #c8cccf;
5. color:#6a6f77;

复制代码

然后将input输入框的轮廓去掉：
  
  

1. outline:0;

复制代码

这样我们的输入框就差不多好了，input样式完整代码如下：
  
  

1. .input_control{
2.   width:360px;
3.   margin:20px auto;
4. }
5. input[type="text"],#btn1,#btn2{
6.   box-sizing: border-box;
7.   text-align:center;
8.   font-size:1.4em;
9.   height:2.7em;
10.   border-radius:4px;
11.   border:1px solid #c8cccf;
12.   color:#6a6f77;
13.   -web-kit-appearance:none;
14.   -moz-appearance: none;
15.   display:block;
16.   outline:0;
17.   padding:0 1em;
18.   text-decoration:none;
19.   width:100%;
20. }
21. input[type="text"]:focus{
22.   border:1px solid #ff7496;
23. }

复制代码

效果如下图：

  
通过上图的input样式我们可以看出，虽然比默认样式好看了许多，但是还有一些问题，比如placeholder的默认字体颜色是灰色，看起来有点浅，我们继续修改样式，那么如何修改placeholder的样式呢？我们加上如下代码即可：
  

1. ::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
2.   color: #6a6f77;
3. }
4. ::-moz-placeholder { /* Mozilla Firefox 19+ */
5.   color: #6a6f77;
6. }
7. input::-webkit-input-placeholder{
8.   color: #6a6f77;
9. }

复制代码

修改之后样式如下图：
  


截图上input的边框有点虚，实际效果比这个好，这样就完成了一个简单漂亮的表单了。