search 类型
- <input type="search"/>
- input[type=search]::-webkit-search-cancel-button{
- -webkit-appearance: none;
- }
重设 css 样式:
- input[type=search]::-webkit-search-cancel-button{
- -webkit-appearance: none;
- position: relative;
- height: 20px;
- width: 20px;
- border-radius: 50%;
- background-color: #EBEBEB;
- }
- input[type=search]::-webkit-search-cancel-button:after{
- position: absolute;
- content: 'x';
- left: 25%;
- top: -12%;
- font-size: 20px;
- color: #fff;
- }
重设边框样式:
- input[type=search]{
- border-radius: 5px;
- border: 1px solid #ebebeb;//必须对默认的border:2px inset覆盖,要不然下面的样式也是白搭
- width: 98%;
- height: 30px;
- outline: none;
- }
重设占位符样式:
- input[type=search]::-webkit-input-placeholder{
- color: blue;
- }
tel 类型
- <input type="tel" class="searchBox" id="number"/>
- var telReg = new RegExp(/^[1][3,4,5,7,8]\d{9}$/); //定义整数正则表达式,验证手机号
- document.getElementById('number').onblur = function () {
- if(!telReg.test(this.value)){
- this.value='';
- }
- }
number 类型
- <input type="number" class="searchBox" id="count"/>
在移动端中,这样设置后用户只能输入数字,如果要限制最大最小数以及是否为整数,可以用正则
- var integer = new RegExp(/^\d+$/); //定义整数正则表达式,验证数量是否为整数
- document.getElementById('count').oninput = function () {
- if(this.value>10 || this.value<1 || !integer.test(this.value)){
- this.value='';
- }
- }