Класс CSS, чтобы сделать выбор HTML похожим на span - PullRequest
Новая
       27

Класс CSS, чтобы сделать выбор HTML похожим на span

0 голосов
/ 02 марта 2012

Я пытаюсь сделать select похожим на span, основываясь на каких-то условиях. У меня есть следующий класс CSS, который отлично работает с полями ввода, но он не работает с раскрывающимся списком. Любое руководство, как я могу сделать выборку похожей на span вместо замены select на span?

Функция jQuery 

function makeReadOnly(context) {
   $('input, select', context).each(function() {
   $(this).addClass('readOnlyInput');
   });​
}

CSS 

.readOnlyInput
{
   border-width: 0;
   background-color: Transparent;
   text-align: right;
}

Ответы [ 5 ]

2 голосов
/ 02 марта 2012

Попытка стилизовать SELECT - тупик.Замена SELECT при загрузке страницы списками, которые выглядят и ведут себя так же, как SELECT?Вполне выполнимо: http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Всегда помните о доступности.

1 голос
/ 02 марта 2012

Вы должны просто заменить select на span.Это стандартный способ сделать то, что вы пытаетесь сделать, и я думаю, вам будет очень трудно заставить select выглядеть как-нибудь иначе, чем select, поскольку это система управления.select элементы даже не выглядят одинаково в разных браузерах / операционных системах, потому что, как веб-разработчик, у вас нет возможности изменить его стиль.многие плагины jQuery, доступные там, скрывают оригинальный select и заменяют его серией div s и проч.

0 голосов
/ 02 марта 2012

Неспособное решение, но вы должны установить черный цвет фона для поля выбора, чтобы он выглядел как тег span, потому что вы не можете изменить цвет стрелки на что-то другое. 

background-color: black;
0 голосов
/ 02 марта 2012

Вы не можете.Нет доступных стилей для удаления стрелки, которую вы видите в выпадающем списке.

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

Один из таких способов скрыть стрелку Как удалить стрелку из элемента выбора в Firefox

0 голосов
/ 02 марта 2012

Как насчет того, чтобы сделать это disabled: 

function makeReadOnly(context) {
   $('input, select', context).each(function() {
      $(this).attr('disabled', 'disabled');
   });​
}

W3C Рекомендация:

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

http://www.w3.org/TR/html4/interact/forms.html#h-17.12

...