Primefaces CSS Not Working p：selectOneMenu＆amp;电话号码：日历

Question

Primefaces CSS无法在p:selectOneMenu和p:calendor组件中使用。 当我给style="width:190px;"时 它正在采取，但当我使用风格类时，它没有采取。

Answer 1

for p:Calendar覆盖css：

.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 2px 2px #D3D3D3 inset;
    color: #555555;
    width: 190px!important;
}

为p:selectOneMenu添加以下css：

.dropdownWidth{
        width:190px !important;
    }

并为styleClass="dropdownWidth"组件添加p:selectOneMenu

Answer 2

使用您的浏览器开发人员工具（在Chrome中，点击F12或右键单击元素并选择“Inspect element”）以查看是否有任何其他CSS类设置宽度，您可能有一个预先存在的类设置将由内嵌样式取代的宽度，而不是具有较少特定标识符的类。

Answer 3

您可以使用size选项来确定input元素的宽度。 像这样：

<p:calendar id="dateNaissance" value="#{utilisateurController.selected.dateNaissance}" 
showOn="button" size="32" />