Cardiff Council Content and design system

www.cardiff.gov.uk

Forms

selecting

Select fieldRadio buttonsCheckbox

layout

Message boxNavigation buttonsValidation and Errors

input

TextEmailTelephoneTextAreaSearch boxDateTimeRangeFileNumber

Select field

Used for selecting an option from a list.  Example, selecting your title.

How to use this component

This element should be used when the user needs to select an option from a pre populated list. For example, their title.


Code Resource

<label for="Title" title="Please select your title" class="form_formLabelTitle">Title *</label>
<select name="Title" id="Title" class="form_formDropDown">
            <option selected disabled>-Select-</option>
            <option value="Mr">Mr</option>
            <option value="Mrs">Mrs</option>
            <option value="Miss">Miss</option>
            <option value="Ms">Ms</option>
            <option value="Dr">Dr</option>
            <option value="Cllr">Cllr</option>
            <option value="Prof">Prof</option>
            <option value="Rev">Rev</option>
</select>
/* Select Field */
.form_formLabelTitle {
    width: 100%;
    font-size: 1em;
    color: black;
    float: left;
    text-align: left;
    padding: 7px;
    padding-left: 0px;
}

.form_formDropDown {
    width: 100%;
    font-size: medium;
    color: #000;
    float: right;
    display: block;
    border: 1px solid silver;
	border-radius: 6px;
    padding: 10px;
    margin: 0px;
    height: 49px;
   cursor: pointer;
   margin-bottom: 15px;
}

.form_formDropDown:hover, .form_formDropDown:focus {
	border: 1px solid #015b66;
	background: #f9f9f9;
outline: none;
}
/* END */

Working Example

-Select- Mr Mrs Miss Ms Dr Cllr Prof Rev