Жирный второй пункт selectOneMenu - PullRequest
Новая
       2

Жирный второй пункт selectOneMenu

2 голосов
/ 10 октября 2011

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

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

1 Ответ

6 голосов
/ 10 октября 2011

Элемент 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> на <ul><li> вместе с хорошим набором CSS / JS-кода, чтобы он выглядел как настоящий выпадающий список.Затем вы можете индивидуально оформить элементы <li>.Вы можете добавить какой-нибудь плагин jQuery или искать третью библиотеку компонентов JSF.PrimeFaces 3.0 имеет <p:selectOneMenu> компонент , который делает именно это.

...