Html safari浏览器中的输入字段：border+；大写文本

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

1） 输入类型搜索的边框未显示

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

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

HTML:

我还尝试了以下方法：

CSS:

让它为safari服务，但那没用

我应该如何修复：

?

---

[我使用的是Safari浏览器版本：5.1.7（内部版本：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;
}

正如博文中提到的-

• 归功于普里扬克·夏尔马

重置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;
}

---

因此，如果您现在检查小提琴-您会注意到它具有正确的样式

您可以使用占位符

属性选择器

：：输入占位符

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!">

检查我在谷歌搜索时发现的这个演示链接

---

这似乎奏效了，这要归功于

谢谢。它很有魅力。但是有没有办法将占位符设置为大写？

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;
}

/* 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;
}

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!">

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