Cardiff Council Content and design system

www.cardiff.gov.uk

Forms

selecting

Select fieldRadio buttonsCheckbox

layout

Message boxNavigation buttonsValidation and Errors

input

TextEmailTelephoneTextAreaSearch boxDateTimeRangeFileNumber

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

Working Example