当前位置：文江博客话题详情

如何在 Safari 和 Chrome 中设置文本字段的样式

发布于 2024-12-02 05:57:34 字数 211 浏览 0 评论 0原文

我还没有在 IE 上测试过。

我想为我的网站 [死网站] 上的搜索栏设置背景图像和文本框形状以及边框的样式。

如果您在 Firefox 或 Opera 上访问它并看到左栏的搜索栏，那就是我想要的。现在，如果您在 Safari 或 Chrome 上访问它，您应该会看到它被默认的输入文本字段替换，这使得文本难以辨认。

即使在这些浏览器上，我如何设置文本框的样式？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝颜夕 2024-12-09 05:57:34

需要明确的是，在您的网站上，您实际上是在设置搜索字段的样式，而不是文本字段的样式。

<input type="search"> <!-- This is what you have -->

<input type="text">

要删除默认样式并允许 css 属性工作，您需要更改 -webkit-appearance 属性。这应该可以解决问题：

#s {
    min-width:98%;
    background-color:#2a2a2a;
    color:#d3d3d3;
    border:2px solid #000000;
    font-size:.85 em;
    height:1.9em;
    display:inline !important;
    border-radius:5px 5px 5px 5px;
    outline:none;
    -webkit-appearance: none; /* add this */
}

To be clear, on your site you are actually styling a search field and not a text field.

<input type="search"> <!-- This is what you have -->

<input type="text">

To remove the default styling and allow your css properties to work you need to change the -webkit-appearance property. This should do the trick:

#s {
    min-width:98%;
    background-color:#2a2a2a;
    color:#d3d3d3;
    border:2px solid #000000;
    font-size:.85 em;
    height:1.9em;
    display:inline !important;
    border-radius:5px 5px 5px 5px;
    outline:none;
    -webkit-appearance: none; /* add this */
}

回复收藏 0 原文

各自安好 2024-12-09 05:57:34

style.css

body {
    background: #999 url(your_image_here.jpg);
}

.search {
    width: 295px; /* 300px less the 5px of left padding*/
    height: 30px;
    line-height: 30px; /* same as height, then you can vertically align the text in the middle*/
    vertical-align: middle;
    font-size: 24px; /* this gives 3px at the top and bottom */
    background-color:#ccc; /* a light grey background in the text box */
    color:#333; /* dark grey font colour */
    padding-left: 5px; /* spacing (padding) within the left hand side of the text box */
    border: 1px solid #000; /* 1px wide black border around the text box */
    display:inline !important;
    border-radius:5px 5px 5px 5px; /* slightly rounded corners, the order of the values is TOP RIGHT BOTTOM LEFT */
    outline:none;
    -webkit-appearance: none; /* this removed the default styling */
}

index.html

<input type="text" class="search" value="search"> <!-- I've given the text box a value (search) so that you can test your css edits quickly without having to type in a value every time you refresh the page -->

我认为这回答了您的问题。如果我能提供任何进一步的帮助，请在评论中回复我。

这是 jsfiddle 的链接，您可以在其中对我的示例进行一些快速原型设计。

http://jsfiddle.net/mstnorris/nVDbA/

style.css

body {
    background: #999 url(your_image_here.jpg);
}

.search {
    width: 295px; /* 300px less the 5px of left padding*/
    height: 30px;
    line-height: 30px; /* same as height, then you can vertically align the text in the middle*/
    vertical-align: middle;
    font-size: 24px; /* this gives 3px at the top and bottom */
    background-color:#ccc; /* a light grey background in the text box */
    color:#333; /* dark grey font colour */
    padding-left: 5px; /* spacing (padding) within the left hand side of the text box */
    border: 1px solid #000; /* 1px wide black border around the text box */
    display:inline !important;
    border-radius:5px 5px 5px 5px; /* slightly rounded corners, the order of the values is TOP RIGHT BOTTOM LEFT */
    outline:none;
    -webkit-appearance: none; /* this removed the default styling */
}

index.html

<input type="text" class="search" value="search"> <!-- I've given the text box a value (search) so that you can test your css edits quickly without having to type in a value every time you refresh the page -->

I think that this answers your question. Get back to me in the comments if I can be of any further assistance.

Here is a link to jsfiddle where you can do a little rapid prototyping of my example.

http://jsfiddle.net/mstnorris/nVDbA/

回复收藏 0 原文

~没有更多了~