Выбор стиля с помощью CSS

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' */

ОбновленоДемонстрация JS Fiddle .

Обратите внимание, что стилизация поля select часто бывает трудной для кроссбраузерности, так как они часто просто заменяют элементы (во многом как img), предоставленные / обработанныеоперационной системой, а не самим браузером.

Если, однако, вы решите объявить определенный height (или min-height) к элементу, это будет работать, но управлять им будет сложнее, есливаши стили когда-либо изменятся впоследствии.

Answer 2

Ваш рост слишком мал для выбора.Я добавил

select{
height: 27px;
}

к вашему css, и он «появляется».Я полагаю, вы просите больше.После того как эта высота, что еще вы просите, чтобы он выглядел?

Answer 3

Высота поля выбора должна быть установлена ​​иначе, чем в текстовых полях.

Установка высоты поля выбора на 27px делает его такой же высоты, как и текстовые поля для меня.

Рабочий пример