Question

我通过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/。选择框是“不可见的”。我希望你能帮助我。

Answer 1

我不完全确定您的问题是什么，但添加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' */

Updated JS Fiddle demo

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

但是，如果您选择向元素声明特定的height（或min-height），那么这将有效，但如果您的样式随后发生变化，可能会更难管理。

Answer 2

选择框的高度需要与文本框的设置不同。

将选择框的高度设置为27px，使其与我的文本框的高度相同。

Working Example

Answer 3

您的身高设置得太小，无法选择。我添加了

select{
height: 27px;
}

到你的CSS并且“出现”。我猜测你要求的更多。在这个高度之后，你还要求它看起来像什么？

通过CSS设置选择框的样式

3 个答案: