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

标签 javascript html css jsf

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

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

   .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"ofcause beeing 作为类添加到 div

有谁知道可以解决的特定 css 元素仅更改箭头的颜色?

在标准的 html select 标签中,它将由 label:after 属性寻址,如下所示:http://cssdeck.com/labs/styling-select-box-with-css3

非常感谢任何帮助。

最佳答案

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

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

关于javascript - 更改 jsf h :selectOneMenu 的下拉箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54255315/

相关文章:

javascript - svg 更改 Edge 上的 LinearGradient 颜色问题 (EdgeHTML)

html - 使元素向右移动

javascript - 通过命令行或 ES6 导入运行 Node.js 脚本

javascript - JavaScript 中的局部变量与全局变量

javascript - 代码拆分如何与导入/导出、babel 和 webpack 一起使用?

jquery - 如何在后台加载 36mb 视频

html - 我想在表格中的文本下划一条线

javascript - throttle 和去抖功能

javascript - HTML javascript 书签用户查看位置

javascript - 如何预加载图像,以便我的 ASP.NET 网页站点中的非插件幻灯片放映计时不会被取消?