0

I have been trying to apply style class to my input text but I am unable to do it .

<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 />

This is my HTML and my CSS says

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

}

I did the inspect on the form and I see it is still calling the default CSS of primefaces.

<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">

I want to increase the size of Search Form to 750px .

enter image description here

I am new to CSS and HTML so might have missed something .

Regards

user2854333
  • 640
  • 6
  • 20

1 Answers1

-1

To debug the css properties you could use the function "inspect element" that all browsers have, and so you can see if the css properties are being aplied.

Cristian Arteaga
  • 450
  • 7
  • 11