Блог

Главная - Вопросы по программированию - Выделенный жирным шрифтом второй элемент selectOneMenu

Выделенный жирным шрифтом второй элемент selectOneMenu

#java #css #jsf-2 #selectonemenu

#java #css #jsf-2 #selectonemenu

Вопрос:

У меня есть selectOneMenu, в котором есть все города штата. Я создал sql, чтобы вывести capital на первое место, но я хотел бы выделить его жирным шрифтом, чтобы сделать его более заметным для тех, кто его использует. Есть ли способ выделить его жирным шрифтом или сделать что-то еще, чтобы сделать более заметным только второй вариант?

 <h:selectOneMenu value="#{someBean.cityId}">
     <f:selectItems value="#{addressBean.stateList}" />
</h:selectOneMenu>

Ответ №1:

Элемент HTML <option> , созданный с помощью <f:selectItems> , допускает очень мало мелкозернистого стиля, а поддержка CSS зависит от браузера. Вы могли бы использовать псевдовыделитель CSS3 :nth-child . Например.

 <h:selectOneMenu value="#{someBean.cityId}" styleClass="cities">
    <f:selectItems value="#{addressBean.stateList}" />
</h:selectOneMenu>

с

 .cities option:nth-child(2) {
    font-weight: bold;
}

Но это работает не во всех браузерах. Только Firefox использует это, а MSIE и Chrome — нет. Последние два не делают этого, потому что они не позволяют устанавливать font-weight параметр. Но они позволяют изменять (фоновый) цвет с помощью color или background-color :

 .cities option:nth-child(2) {
    background-color: pink;
}

Пока это работает во всех браузерах с поддержкой CSS3 (т. Е., Таким образом, не в MSIE8 или старше).

Если вы хотите наилучшую кроссбраузерную совместимость, вам нужно будет заменить <select> на an <ul><li> вместе с хорошей кучей кода CSS / JS, чтобы он выглядел как настоящий выпадающий список. Затем вы можете стилизовать <li> элементы по отдельности. Вы могли бы добавить какой-нибудь плагин jQuery или поискать 3-ю библиотеку компонентов JSF. В PrimeFaces 3.0 есть <p:selectOneMenu> компонент, который делает именно это.

Комментарии:

1. styleClass в selectOneMenu и это не сработало, есть какая-нибудь другая идея? Это может быть другой цвет фона или что-то в этом роде. Спасибо

2. Как уже было сказано, элемент HTML <option> допускает очень мало мелкозернистого стиля. Жирный шрифт работает только в Firefox (и даже тогда, только когда вы открываете выпадающий список и проверяете элемент списка!). Вы могли бы использовать background-color вместо этого, но это приводит к другим результатам в браузерах. MSIE показывает его уже в <select> , но FF и Chrome нет, он показывает его только внутри открытого выпадающего списка. Если вы хотите получить полный контроль над стилем, вам действительно нужно использовать <ul><li> , который имитирует выпадающий список. Смотрите также ссылку на компонент PrimeFaces.

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

4. Вместо этого используйте псевдовыделитель CSS3 :nth-child() . .cities option:nth-child(2) . Опять же, вы зависите от поддержки браузера. Он не работает, например, в IE8 и более старых версиях, только в IE9 и новее. Я обновил ответ.