更改 p:selectOneMenu 的样式答案

【问题标题】：Change styling of p:selectOneMenu更改 p:selectOneMenu 的样式
【发布时间】：2017-08-22 13:01:23
【问题描述】：

我已经在 Bootsfaces 中实现了上面的 selectOneMenu，在 primefaces 中实现了下面的 selectOneMenu。

我需要在 primefaces 中实现，但在 bootsfaces 中需要样式。

如何将第二个 selectonemenu 的样式更改为上述 selectOneMenu？

我需要删除灰色边框。谁能给我推荐一下。

编辑 -

添加建议的css后，primefaces selectonemenu在选择selectonemenu时显示如上。

我需要在选择菜单中围绕向下箭头符号对齐突出显示的框，并将突出显示的框颜色更改为灰色。

请提出进一步的修改建议。提前谢谢你。

【问题讨论】：

如果你想改变所有选择元素的样式，只需将background-color: #fff !important; 设置为ui-selectonemenu 类。或者将特定类添加到您的 p:selectOneMenu 并定义该 CSS。
为什么不直接使用 bootsfaces 呢？

标签： css primefaces styling bootsfaces

【解决方案1】：

我在我的特定屏幕上显示了带有自定义 CSS 类 (form-control & radius-none) 的 p:selectOneMenu：

XHTML：

<p:selectOneMenu styleClass="form-control radius-none" ...
...
...

CSS：

.ui-selectonemenu.form-control {
    color: #555 !important;
    display: block !important;
    margin-bottom: 0 !important;
    padding: 5px 10px !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
}

.radius-none {
    border-radius: 0 !important;
}

.ui-selectonemenu.form-control .ui-selectonemenu-trigger {
    top: 0;
    right: 0;
    width: 16px;
    height: 100%;
    padding: 0 5px;
    cursor: pointer;
    position: absolute;
    margin: 0 !important;
    border: none !important;
    margin-top: 5px !important;
    background: transparent !important;
}

更新：与.ui-selectonemenu-label 和.ui-inputfield 相关的其他CSS 也是呈现的HTML 的一部分，在我的例子中是通用的：

.ui-selectonemenu .ui-selectonemenu-label {
    width: 100%;
    border: none;
    display: block;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    margin-bottom: 0px;
    white-space: nowrap;
    font-weight: normal;    
}

.ui-selectonemenu .ui-selectonemenu-label.ui-inputfield.ui-corner-all {
    text-overflow: ellipsis;
}

.ui-inputfield {
    margin: 0;
    padding: 5px;
    background: #ffffff;
    font-weight: normal;
    outline: medium none;
    box-shadow: inset 0 0 0 #8f8f8f!important;
    -webkit-box-shadow: inset 0 0 0 #8f8f8f!important;
}

注意：如果您想更改所有p:selectOneMenu 元素的样式，请删除自定义类。

【讨论】：

非常感谢..@Parkash Kumar。但需要一些修改。添加建议的css后，我添加了图像。请提出进一步的修改建议。谢谢。
谢谢你的详细解释...你能告诉我在xhtml中还有什么要添加的吗
除了 form-control 和 radius-none 之外不需要在中添加任何东西？
是的，只需添加这两个类。
非常感谢@Parkash Kumar

【解决方案2】：

前段时间，我写了一篇关于这个问题的文章。它包含一个演示项目的链接，该项目解决了 PrimeFaces 的许多（希望是大多数）不兼容问题：https://www.beyondjava.net/blog/how-to-use-bootsfaces-and-primefaces-in-the-same-project/

【讨论】：