Как стиль JQuery выбран, выберите поле

Question

Как стиль JQuery выбран, выберите поле

7

Я использую jQuery для моего multi-select. Тем не менее, я нахожу, что стили, предварительно определенные в файле chosen.css, трудно переписать, что полностью избавляется от chosen.css также не может быть очень хорошим вариантом.

Вот моя скрипка: https://jsfiddle.net/k1Lr0342/

HTML:

<select class="chosen" multiple="true" style="height: 34px; width: 280px">
  <option>Choose...</option>
  <option>jQuery</option>
  <option selected="selected">MooTools</option>
  <option>Prototype</option>
  <option selected="selected">Dojo Toolkit</option>
</select>

css:

.chosen-choices {
    border-radius: 3px;
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
    border: none;
    height: 34px !important;
    cursor: text;
    margin-top: 12px;
    padding-left: 15px;
    border-bottom: 1px solid #ddd;
    width: 285px;
    text-indent: 0;
    margin-left: 30px;
  }

Я попытался напрямую написать css для .chosen-choices ul. Некоторые из них работают как border-radius и box-shadow. Но другие: margin, height, padding, border и т.д. Перезаписываются файлом chosen.css. Один из вариантов - поставить !important для каждой настройки, которая не работает. Это будет работать для большинства вещей, но все же не высота. Есть предположения?

Lance Shi 21 янв. 2016, в 08:00

Источник

0

Я думаю, что вы должны включить свой новый CSS ниже выбранного. CSS решит вашу проблему. Вы пробовали это?
ketan 21 янв. 2016, в 06:26
0

@ketan Я попробовал это. Кажется, это не работает
Lance Shi 21 янв. 2016, в 06:31

Теги:

jquery

css

css3

jquery-chosen

4 ответа

1

Попробуйте использовать jQuery, здесь работает JSFIDDLE

$(".chosen-choices li").css("background","red");

Shoeb Mirza 21 янв. 2016, в 07:36

0

Немного поздно, но я подумал, что буду отвечать, так как я столкнулся с этим. Поскольку выбранные элементы, которые вы видите, основаны на выбранном меню, которое он скрывает, вы должны найти элемент в div сразу после него (созданный выбранным) и стилизовать его. Вы можете сделать это с помощью Jquery, предполагая, что вы знаете его значение.

$('.your-select-menu').next().find('.search-choice').each(function() {
  if ($(this).text() === someValue) {
    $(this).css("border-color", "#00b300");
  }
})

Результаты в этом

Bryan 24 янв. 2017, в 00:24

0

Если вы посмотрите на .chosen-choices в selected.css, вы увидите, что высота auto!important. Удалите (или комментируйте) те !important, и это должно быть хорошо.

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

Joshua H 21 янв. 2016, в 06:58

1

Дело в том, что я не хочу изменять selected.css
Lance Shi 21 янв. 2016, в 06:32

Ещё вопросы

Я думаю, что вы должны включить свой новый CSS ниже выбранного. CSS решит вашу проблему. Вы пробовали это?
@ketan Я попробовал это. Кажется, это не работает
Дело в том, что я не хочу изменять selected.css

Mystika · Accepted Answer · 2016-01-21T08-07-00.000Z

CSS примет стиль, который использует более определенный селектор.

.chosen-container-multi .chosen-choices {
    /*blah blah*/
}

.chosen-choices {
    /* less specificity, this style might not work  */
}

Рабочая скрипка

Вы можете повысить специфичность, просто повторяя селектор класса, например так: .chosen-choices.chosen-choices