Можно ли преобразовать HTML-текст в обычный текст с помощью CSS?

У меня есть раскрывающийся список на веб-странице, используя тег HTML5 <select>. Есть моменты, когда я хочу сделать его "только для чтения", что отображает его только как текст. Например:

Иногда я хочу, чтобы это было "чтение/запись":

И еще раз я хочу, чтобы он был "только для чтения":

Я бы предпочел не использовать атрибут "disable". Я думаю, что это выглядит липким, и подразумевает, что есть какой-то выбор для пользователя, когда он не доступен.

Можно ли преобразовать внешний вид текущего параметра для select в обычный текст с помощью CSS?

Ответ 1

Да, используйте CSS:

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none; 
    border: none;
    /* needed for Firefox: */
    overflow:hidden;
    width: 120%;
}

Пример:

http://jsfiddle.net/eG3dS/

Из-за раздела "Необходим для Firefox" вам нужно будет сделать div или span, который сдерживает размер окна выбора. Это слишком плохо FF не уважает moz-appearance здесь.

Обратите внимание, что даже если это делает его похожим на обычный текст, это все еще рабочий блок выбора! Вам нужно будет отключить его каким-либо образом, либо используя атрибут "disabled", либо изменив цвет шрифта или иначе.

Ответ 2

В WebKit вы можете сделать это с помощью -webkit-appearance: none;

select {
    -webkit-appearance: none;
    border: none;
}

Демо: http://jsfiddle.net/ThiefMaster/56Eu2/2/

Чтобы пользователь фактически не использовал selectbox, вам необходимо отключить его (disabled).

Обратите внимание, что это нестандартно и не работает с -moz-appearance, например! Поведение свойства -*-appearance отличается в разных браузерах, а Mozilla даже рекомендует не использовать его на веб-сайтах вообще:

Не используйте это свойство на веб-сайтах: он не только не является стандартным, но и изменяет его поведение от одного браузера к другому. Даже ключевое слово none не имеет одинакового поведения для каждого элемента формы в разных браузерах, а некоторые не поддерживают его вообще.

Ответ 3

Я думаю, что проще всего иметь промежуток рядом с вашим выбором и использовать прослушиватель событий для выбора, чтобы скопировать его текст в диапазон и переключить, видно ли выделение или диапазон. Это немного Javascript, но это даст вам большой контроль.

Ответ 4

Вы можете создать пользовательский снимок и отключить состояние, с CSS.

Существует действительно хороший плагин jQuery, который вы можете установить с помощью: http://uniformjs.com/