通过 CSS 设置选择框样式

发布于 2024-12-09 17:19:12 字数 717 浏览 0 评论 0原文

我在通过 CSS 设置选择框样式时遇到问题。它应该看起来像我页面中的其他内容。这是我当前为您提供的代码的示例。

<select>
  <option selected="selected" value="1">1</option>
  <option value="2">2</option>
</select>
<br>
<input type="text" style="width:35px;margin-right:0px;">
<input type="text" style="width:180px;">

这里是我使用的CSS：

input[type=text], textarea, select{
    border: 1px solid #cccccc;
  font:10px sans-serif;
  background-color: #ffffff;
  width: 240px;
  height:14px;
  padding:5px;
    color: #101010;
}

如果有的话，您可以在这里找到解决问题的小提琴： http://jsfiddle.net/6VGWc /。选择框是“不可见的”。我希望你能帮助我。

原文

i've got a problem with the styling of a select box via css. It should look like the other in puts in my page. Here is an exmaple of my current code for you.

<select>
  <option selected="selected" value="1">1</option>
  <option value="2">2</option>
</select>
<br>
<input type="text" style="width:35px;margin-right:0px;">
<input type="text" style="width:180px;">

And here the CSS i use:

input[type=text], textarea, select{
    border: 1px solid #cccccc;
  font:10px sans-serif;
  background-color: #ffffff;
  width: 240px;
  height:14px;
  padding:5px;
    color: #101010;
}

Here you can find a fiddle with the problem if got: http://jsfiddle.net/6VGWc/. The selectbox is "invisible". I hope you can help me.

分享到QQ

分享到微博

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

发布评论

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

星星的軌跡 2024-12-16 17:19:12

我不完全确定您的问题是什么，但添加 box-sizing 规则会使内容（select 元素的第一个选项）可见：

-moz-box-sizing: content-box; /* for Firefox/Gecko browsers */
-webkit-box-sizing: content-box; /* for Webkit-based browsers, Safari, Chrome, Chromium... */
-o-box-sizing: content-box; /* for Opera */
box-sizing: content-box; /* or 'padding-box' or 'border-box' */

更新了 JS Fiddle 演示。

请注意，跨浏览器设置 select 框的样式通常很困难，因为它们通常只是由操作系统提供/处理的简单替换元素（很像 img），而不是浏览器本身。

但是，如果您选择为元素声明特定的height（或min-height），这会起作用，但如果您的样式发生变化，管理起来可能会更加困难随后。

I'm not entirely sure what your question is, but adding a box-sizing rule makes the content (the first option of the select element) visible:

-moz-box-sizing: content-box; /* for Firefox/Gecko browsers */
-webkit-box-sizing: content-box; /* for Webkit-based browsers, Safari, Chrome, Chromium... */
-o-box-sizing: content-box; /* for Opera */
box-sizing: content-box; /* or 'padding-box' or 'border-box' */

Updated JS Fiddle demo.

Please note that styling a select box is often difficult to do cross-browser, as they're often simply replaced elements (much like an img) supplied/handled by the OS, rather than the browser itself.

If, however, you choose to declare a specific height (or min-height) to the element this would work, but may be more difficult to manage should your styles ever change subsequently.

回复收藏 0 原文