微信里强制强制浏览器打开_在所有浏览器中强制HTML5搜索输入的外观一致

微信里强制强制浏览器打开

Default appearance of search input in Webkit (top) vs. Firefox (bottom)

Webkit(顶部)和Firefox(底部)中搜索输入的默认外观

As a general rule, the question “should websites appear the same in every browser?” can be answered authoritatively and succinctly. However, when it comes to some of the new HTML5 form elements, different browsers have very different ways of rendering inputs, to such a degree that their default appearance may clash with your overall design. This is especially true for the search input, which is provided with a particular style in Mobile Safari, but appears as a standard text input in other browsers. If you wish to have the search input to have consistent look and feel, you must negate the mobile appearance and style in the input to be consistent:

通常，“每个浏览器中的网站都应该显示相同的网站吗？”这一问题。 可以权威而简洁地回答。 但是，当涉及到一些新HTML5 表单元素时 ，不同的浏览器具有非常不同的呈现输入的方式，以至于它们的默认外观可能与您的总体设计相冲突。 对于search输入而言尤其如此，在Mobile Safari中提供了特定样式的search输入，但在其他浏览器中显示为标准文本输入。 如果您希望search输入具有一致的外观，则必须否定输入中的移动外观和样式以保持一致：

<input type="search" placeholder="search" name="search_string" id=search_string" maxlength="25">

Mobile Safari uses two proprietary CSS properties to customize the appearance of the search input; you have to use those, together with the correct values and attribute selectors, to remove the default appearance.

移动Safari使用两个专有CSS属性来自定义搜索输入的外观； 您必须将它们与正确的值和属性选择器一起使用，以删除默认外观。

input[type=search] {
	-webkit-appearance: textfield;
	font-size: medium;
	background: #fff;
}

翻译自: https://thenewcode.com/343/Forcing-A-Consistent-Appearance-For-the-HTML5-Search-Input-Across-All-Browsers

微信里强制强制浏览器打开