将StyleClass应用于输入文本

Question

我一直在尝试将样式类应用于我的输入文本，但我无法做到。

<h:form id="SearchPageForm">
    <br />

    &nbsp;&nbsp;&nbsp;&nbsp;<p:outputLabel>Search: </p:outputLabel>
    <p:inputText id="search"  styleClass="text-input" size="123"
        value="${SearchController.employeeBO.employeeID}" />

    &nbsp;<h:commandButton value="submit" image="images/search.png"
        style="vertical-align: top;" action="#{SearchController.searchOnId}" />
    <br />
    <br />

这是我的HTML，我的CSS说

.text-input{
background-color:#fbfbfb;
border:solid 50px #000000;
margin-bottom:8px;
width:750px;
padding:8px 5px;
color:#797979;

}

我在表单上进行了检查，我发现它仍在调用默认的primefaces CSS。

<input id="SearchPageForm:search" name="SearchPageForm:search" type="text" size="123" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all text-input" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">

我想将搜索表单的大小增加到750px。

我是CSS和HTML的新手，所以可能错过了一些东西。

此致

Answer 1

要调试css属性，您可以使用所有浏览器都具有的“inspect element”功能，这样您就可以查看是否正在使用css属性。