css - 更改 p :selectOneMenu 的样式

Question

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

我需要在 primefaces 中实现，但要像在 bootsfaces 中一样设置样式。

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

我需要删除灰色边框。谁能给我建议。

编辑 -

添加建议的 css 后.. primefaces selectonemenu 在选择 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 元素的一般样式，请删除自定义类。