Safari浏览器中的输入字段：边框+大写文本答案

【问题标题】：Input field in safari browser: border + uppercase textSafari浏览器中的输入字段：边框+大写文本
【发布时间】：2014-04-27 11:11:15
【问题描述】：

正如标题所说，以下代码的输出在 safari 浏览器上没有显示出来：

1) 输入类型搜索的边框不显示

2) 文本转换：大写不起作用。

其余浏览器显示准确的输出。请参阅下面的图片。

Fiddle

HTML：

<div class="searchLob">
    <input type="search" class="searchInput" placeholder="Search the website"></input>
    <button onclick="Submit();" class="searchInputBtn">Search</button>
</div>

CSS：

.searchLob{
    position: relative;
    display: inline-block;
    }

.searchInput{
    position: relative;
    border: 2px solid #d2d4d8;
    height: 44px;
    padding: 0 10px;
    background-color: #fff;
    width: 200px;
    margin: 2px 0 0 2px;
    float: left;
    text-transform: uppercase;
    }

.searchInputBtn{
    position: relative;
    float: left;
    border: medium none;
    color: #fff;
    cursor: pointer;
    font: 14px 'arial';
    height: 44px;
    margin-left: -4px;
    margin-top: 2px;
    text-decoration: none;
    text-transform: uppercase;
    width: 70px;
    background-color: #6692a7;
    }

.searchInputBtn:hover{
    background-color:#547e92;
    }

textarea:focus, input:focus, select:focus{
    border-color: #cccfd0;
    box-shadow: 0 1px 1px rgba(204, 207, 208, 0.075) inset, 0 0 8px rgba(204, 207, 208, 1);
    outline: 0 none;
    }

我也试过以下方法：

CSS：

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .myClass {
     color:red;
    }

    /* Safari only override */
    ::i-block-chrome,.myClass {
     color:blue;
    }
}

让它适用于 safari，但这并没有做任何事情。

我应该如何解决：

[我使用的是 Safari 浏览器版本：5.1.7 (Build:7534.57.2)]

【问题讨论】：

这似乎有效 - Resetting HTML5 Search Input in Webkit

标签： html css safari

【解决方案1】：

如果您删除所有 CSS，并在 Safari 中检查该元素，您会注意到从 user agent stylesheet 添加了很多 CSS - 这是浏览器的默认样式表，并且会因浏览器而异。

例如，这是添加到输入中的一些默认样式：

input[type="search"] {
    -webkit-appearance: searchfield;
    box-sizing: border-box;
}
user agent stylesheet
input, input[type="password"], input[type="search"], isindex {
    -webkit-appearance: textfield;
    padding: 1px;
    background-color: white;
    border: 2px inset;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    cursor: auto;
}
user agent stylesheet
:focus {
    outline: 5px auto -webkit-focus-ring-color;
}

正如博文中提到的 - Resetting HTML5 Search Input in Webkit

感谢 Priyank Sharma

重置Safari默认样式的方法是添加以下CSS：

/* Reset HTML5 Search Input in Webkit */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}
input[type=search] {
  -webkit-appearance:textfield;
  -webkit-box-sizing:content-box;
}

因此，如果您现在检查 Fiddle - http://jsfiddle.net/Hg2A6/8/，您会发现它的样式正确

【讨论】：

谢谢。它就像魅力一样。但是无论如何将占位符设置为大写？

【解决方案2】：

你可以使用占位符Attribute Selector

::input-placeholder

input::-webkit-input-placeholder {
    color: rgba(0,5,143,.5);
    text-transform: uppercase;
}
input::-moz-placeholder {
    color: rgba(0,5,143,.5);
    text-transform: uppercase;
}
input:-moz-placeholder {   /* Older versions of Firefox */
    color: rgba(0,5,143,.5);
    text-transform: uppercase;
}
input:-ms-input-placeholder { 
    color: rgba(0,5,143,.5);
    text-transform: uppercase;
}

<input type="text" placeholder="I'm placeholder text!">

注意：并非所有 CSS 属性都支持 ::输入占位符规则。事实上，只有少数是最有用的是：

IE8 及更早版本不支持占位符文本，但包括 polyfil javascript 解决方案可以支持这些浏览器。

color
font-size
font-style
font-weight
letter-spacing
line-height
padding
text-align
text-decoration

查看我在谷歌搜索时发现的这个演示链接..http://codepen.io/Treehouse/pen/fIesK

归功于Guil Hernandez

【讨论】：