Search box
A field for performing a search.
How to use this component
This element should be used for adding a search to a form, for example a postcode search
Code Resource
<label for="PostcodeSearch" class="form_formLabelTitle">Postcode Search</label>
<input name="PostcodeSearch" type="text" maxlength="10" size="6" id="PostcodeSearch" title="Enter a postcode to search for" class="form_formTextbox_pcSearch">
<input type="button" name="imgBtnPostcodeSearch" id="imgBtnPostcodeSearch" alt="Search for a postcode" title="Search for a postcode" "></button>
/* Search Box */
.form_formLabelTitle_pcSearch {
width: 100%;
font-size: 1em;
color: black;
float: left;
text-align: left;
padding: 7px;
padding-left: 0px;
}
.form_formTextbox_pcSearch {
width: 45%;
font-size: medium;
margin-bottom: 30px;
display: block;
text-indent: 10px;
border: 1px solid silver;
padding: 10px;
float: left;
height: 45px;
border-radius: 6px 0 0 6px;
}
.form_formTextbox_pcSearch:hover, .form_formTextbox_pcSearch:focus {
border: 1px solid #015b66;
background: #f9f9f9;
}
.form_formTextbox_pcSearch + input {
width: 45px;
height: 45px;
box-sizing: border-box;
padding-left: 45px;
background: url(https://www.cardiff.gov.uk/Style%20Library/IMAGES/search_plain.png) !important;
margin: 0px!Important;
float: left;
background-color: #015b66!important;
overflow: hidden!important;
border-radius: 0 6px 6px 0;
border:0px;
}
.form_formTextbox_pcSearch + input:hover {
background-color: #017988!important;
border: 0px!important;
}
/* END */