时间戳

首页 > 解决方案 > 更改 jsf h:selectOneMenu 的下拉箭头

javascript - 更改 jsf h:selectOneMenu 的下拉箭头

问题描述

我正在使用 jsf，并且正在使用h:selectOneMenu标签。目前在网站上显示如下： selectOneMenu

但我想在最后改变箭头的外观。它应该是红色且没有背景。我尝试了很多方法，例如使用溢出属性或将选择项的背景更改为我想要的下拉箭头。更改元素的颜色也会影响其中的书写。出于某种原因，将 selectOneMenu 放入 adiv并为其添加以下样式可以正常工作：

   .epSelect {
width: 240px;
overflow: hidden;
background: url(..arrowdown_red.png) no-repeat right #FAFAFA;
border: 1px solid #CDCDCD;
color: #333333;
height: 27px; }

.epSelect select {
    background: transparent;
    width: 257px;
    height: 27px;
    padding-top: 5px;
    font-size: 12px;
    border: 0;
    border-radius: 0;
    -webkit-appearance: none;
    padding-left: 3%;
    cursor: pointer;    
}

“epSelect”因为被添加为类div

有谁知道特定的 css 元素可以用来改变箭头的颜色吗？

在标准 htmlselect标记中，它将由label:after属性解决，如下所示：http: //cssdeck.com/labs/styling-select-box-with-css3

任何帮助深表感谢。

标签： javascripthtmlcssjsf

解决方案

简单地说，JSF 在这部分只是一个 html 生成器，它在其中生成一个普通的 html 选择/下拉列表。实际上，您的问题是“如何更改 html 选择的图标”。

因此，请查看以下 Stackoverflow Q/A 以获得答案

推荐阅读