input[type=search],css设置元素height无效,以及css3的apperance属性

@zhirui1994 2019-01-23 13:57:00发表于 zhirui1994/zhirui1994.github.io CSSHTML

input[type=search]简介及起因

input[type=search]是H5对表单的一项增强,它使input元素呈现为一个搜索框。除了换行符会自动从输入中移除,无其他强制性语法,更多参见MDN
但在浏览器中一般会为input[type=search]元素预定义了一些样式,并且当我我们想更改元素表现样式的时候,css不起作用,如下:

input[type=search] {
    height: 30px;
}

上述代码在chrome浏览器中是不起作用的。

解决方案

更改元素默认表现形势需要用到CSS3的appearance属性。

CSS3 appearance

appearance属性允许使元素看上去像浏览器原生的用户界面元素。
同时可以设置appearance=none来清除浏览器默认样式。
由于这是一个实验中的功能,所有主流浏览器暂时还都不支持appearance属性。
Firefox 支持替代的-moz-appearance属性。
Safari 和 Chrome 支持替代的-webkit-appearance属性。
Opera 和 IE 不支持此属性。

语法

appearance: normal|icon|window|button|menu|field|none;

实列

input[type=search] {
    appearance: none;
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
    height: 30px;
}

如上代码就可以使得input[type=search]的高度设置生效了。

参考