selectOneMenu 的第二项加粗

发布于 2024-12-09 11:59:44 字数 313 浏览 0 评论 0原文

我有一个 selectOneMenu，其中包含一个州的所有城市。我已经创建了一个 sql 来将资本放在第一位，但我想将其加粗以使其对使用它的人更明显。有没有办法将其加粗或采取其他措施以使第二个选项更加明显？

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

原文

I've got a selectOneMenu which has all cities of a state. I've made a sql to bring capital in first place, but i'd like to bold it to make it more visible to who is using it. Is there a way to bold it or to do something else to make more visible just the second option?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

放我走吧 2024-12-16 11:59:44

由生成的 HTML 元素允许非常少的细粒度样式，并且 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 或更早版本）。

如果您想要最佳的跨浏览器兼容性，则需要将

The HTML <option> element as generated by <f:selectItems> allows for very little fine-grained styling and the CSS support is browser-dependent. You could use the CSS3 :nth-child pseudoselector. E.g.

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

with

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

But this doesn't work in all browsers. Only Firefox eats that, but MSIE and Chrome not. The latter two doesn't do that because they don't allow setting font-weight on the option. But they allows you to change the (background) color by color or background-color:

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

This works in all CSS3 capable browsers so far (i.e. thus not in MSIE8 or older).

If you want best cross browser compatibility, you'd need to replace the <select> by an <ul><li> along with a good bunch of CSS/JS code to make it look like a real dropdown. You could then style the <li> elements individually. You could throw in some jQuery plugin or to look for a 3rd JSF component library. PrimeFaces 3.0 has a <p:selectOneMenu> component which does exactly that.

回复收藏 0 原文

~没有更多了~