更改 p:selectOneMenu 的样式

Question

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

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

如何将第二个selectonemenu的样式改成上面的selectOneMenu？

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

编辑 -

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

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

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

Answer 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 元素的一般样式，请删除自定义类.

Answer 2

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

更改 p:selectOneMenu 的样式

Change styling of p:selectOneMenu

css

styling

primefaces

bootsfaces