将 StyleClass 应用于输入文本答案

【问题标题】：Applying StyleClass to Input text [duplicate]将 StyleClass 应用于输入文本
【发布时间】：2015-05-02 09:08:44
【问题描述】：

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

<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 的新手，所以可能漏掉了一些东西。

问候

【问题讨论】：

能够使用 !important 在 CSS 中修复它。谢谢
你应该避免使用!important。检查并查看哪个类覆盖了样式。

标签： css jsf-2 primefaces xhtml

【解决方案1】：

要调试 css 属性，您可以使用所有浏览器都有的“检查元素”功能，因此您可以查看 css 属性是否正在被应用。

【讨论】：