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⽅法：
οnclick=“this.blur()” 单击事件失去焦点
οnfοcus=”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;input标签placeholder属性
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。