html – safari浏览器中的输入字段：边框大写文本

发布时间：2020-12-14 19:42:54 所属栏目：资源来源：网络整理

导读：正如标题所示,以下代码的输出在safari浏览器上没有显示： 1) Border of input type-search not showing 2) text-transform: uppercase doesn’t work. 其余的浏览器显示确切的输出.请参阅下面附带的图像. Fiddle HTML： div class="searchLob" input type="s

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

1) Border of input type-search not showing

2) text-transform: uppercase doesn’t work.

其余的浏览器显示确切的输出.请参阅下面附带的图像.

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,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浏览器版本：5.1.7(Build：7534.57.2)]

解决方法

如果删除所有CSS,并检查Safari中的元素,您会注意到用户代理样式表中添加了很多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;
}

因此,如果你现在检查小提琴 – http://jsfiddle.net/Hg2A6/8/,你会发现它得到了正确的造型

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!