您的位置：首页 > Web前端 > CSS

[置顶] CSS样式去除input和textarea点击选中框,只能输入数字

2016-08-05 00:03 549 查看 
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}

body {
width: 100%;
height: 100%;
}

.java {
position: relative;
width: 600px;
height: 400px;
background: green;
opacity: 0.9;
}

.telphone {
margin: 10px auto;
width: 302px;
height: 36px;
background: #FFFFFF;
overflow: hidden;
border-radius: 5px;
}

.telphone img {
vertical-align: middle;
margin-left: 14px;
margin-right: 14px;
}
/*也可以
* input[type="text"] {
outline: none;
appearance: none;
width: 202px;
height: 36px;
background-color: white;
border: 0px solid #FFFFFF;
}

input[type='text']:focus {
border: 0px solid green;
outline: none;
color: black;
background-color: #FFFFFF;
}*/

.telphone input {
width: 202px;
height: 36px;
line-height: 36px;
background-color: white;
border: 0px solid #FFFFFF;
appearance: none;
outline: none;
font-size: 15px;
}

.telphone input:focus {
color: black;line-height: 36px;
background-color: #FFFFFF;
border: 0px solid red;
font-size: 15px;
}

::-webkit-input-placeholder {
/* WebKit browsers */
color: red;
}

.passwds {
margin: 10px auto;
width: 302px;
height: 36px;
/*border: 1px solid red;*/
overflow: hidden;
border-radius: 5px;
}

.passwd {
height: 36px;
background: #FFFFFF;
overflow: hidden;
border-radius: 5px;
width: 200px;
float: left;
}

.passwd img {
vertical-align: middle;
margin-left: 14px;
margin-right: 14px;
}

.passwd input {
width: 132px;line-height: 36px;
height: 36px;
background-color: white;
border: 0px solid #FFFFFF;
appearance: none;
outline: none;
font-size: 15px;
}

.passwd input:focus {
color: black;line-height: 36px;
background-color: #FFFFFF;
border: 0px solid red;
font-size: 15px;
}

button {
float: right;
width: 80px;
height: 36px;
display: inline;
background-color: blueviolet;
border: 0px solid blueviolet;
outline: none;
border-radius: 5px;
color: red;
}
</style>
<script type="text/javascript">
$(function() {

})
</script>
</head>

<body>
<div class="java">
<h1>hahaha</h1>
<div class="telphone">
<img src="img/close_hov.png" />
<!-- <input type="tel" placeholder="只能输入数字" /> -->
<input type="tel" maxlength="11" size="14" name="amount" id="amount" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" placeholder="只能输入数字" />
</div>
<div class="passwds">
<div class="passwd">
<img src="img/close_hov.png" />
<!-- <input type="tel" placeholder="只能输入数字" /> -->
<input type="tel" maxlength="4" size="14" name="amount" id="amount" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" placeholder="只能输入数字" />
</div>
<button>立即注册</button>
</div>

</div>

</body>

</html>


取消input和textarea的聚焦边框：

复制代码代码如下:

input{outline:none}

取消textarea可拖动放大：

复制代码代码如下:

textarea{resize:none}


1、去除Chrome等浏览器文本框默认发光边框

input:focus, textarea:focus {
outline: none;
}
去掉高光样式：

input:focus{
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only;
}

当然这样以来，当文本框载入焦点时，所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了，但我们可以重新根据自己的需要设置一下，如：

input:focus,textarea:focus {
outline: none;
border: 1px solid #f60;
}
这样的话，当文本框载入焦点时，边框颜色就会变为橙色，给用户一个反馈。


取消chrome下input和textarea的聚焦边框：

input,button,select,textarea{outline:none}
取消chrome下textarea可拖动放大：

textarea{resize:none}
最后，写在一起，重置input和textarea的默认样式：

input,button,select,textarea{outline:none}
textarea{resize:none}
ok，问题解决，好像safari下也是有这些默认样式的，加这个也能同样取消。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航