a、button、input、textarea相关样式总结

一、a、button、input、textarea点击出现蓝色边框，如何去掉？

a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-modify: read-write-plaintext-only;}
可根据实际情况添加
outline: none;或box-shadow: none;
有时候图片放在a标签里也会出现边框，可设置图片的边框为0.
除此之外还要注意其伪类的设置。
js方法：
onclick=“this.blur()” 单击事件失去焦点
onfocus=”this.blur()” 为了去除链接获取焦点后外围的虚线框，按Tab焦点在此处前面可轮流转，后面的内容通过Tab键无法访问

二、input两种默认显示文字方式

1.placeholder属性规定帮助用户填写输入字段的提示，值不会被提交，且该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
如

<input type="text" name="tname" placeholder="请在这里输入用户名">

2.value属性规定 input 元素的值，值会被提交
如

<input type="text" name="tname" value ="admin" placeholder="请在这里输入用户名">

三、修改input输入框的样式

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

<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="Enter room name here"/>
    </div>
    <div class="input_control">
        <input type="text" class="form_input" placeholder="Input key here if use encryption"/>
    </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输入框的默认样式去掉

-web-kit-appearance:none;
  -moz-appearance: none;

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

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

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

outline:0;

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

.input_control{
  width:360px;
  margin:20px auto;}
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;}

四、移动端输入框限制只限输入数字

原来是这样写的： ``` ``` 发现只有pc端和安卓移动端好用，ios移动端上就不好使，于是加上了type="tel" 发现弹出了纯数字键盘，但是没法输入小数点啊。。。最后使用如下写法： ``` ``` ok问题解决，ios系统上也不能输入非数字了~

五、和的区别

在HTML中有两种方式表达文本框
一种是元素的单行文本框，
一种是的多行文本框。
区别：一个是单行文本框，一个是多行文本框。

元素：
1.一定要指定type的值为text；
2.通过size属性指定显示字符的长度，value属性指定初始值，Maxlength属性指定文本框可以输入的最长长度；

<input type="text" value="" size="10" Maxlength="15">

元素
1.使用标签对
2.内容放在标签对中
3.使用row、col指定大小

<textarea row="3" col="4">内容内容内容内容</textarea>