<!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;
}
.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 {
color: red;
}
.passwds {
margin: 10px auto;
width: 302px;
height: 36px;
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" 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" 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下也是有這些默認樣式的，加這個也能同樣取消。
