Cardiff Council Content and design system

www.cardiff.gov.uk

Forms

selecting

Select fieldRadio buttonsCheckbox

layout

Message boxNavigation buttonsValidation and Errors

input

TextEmailTelephoneTextAreaSearch boxDateTimeRangeFileNumber

File

Defines a file-select field and a “Browse” button for file uploads.

How to use this component


Code Resource

<label for="myfile" class="form_formLabelTitle">Select a file *</label>
<input type="file" name="myfile" id="myfile" class="form_formFileUpload" title="Select a file" aria-describedby="file_description" >
<span id="file_description" class="form_formInformationMessage">Please select a file to upload.</span>
/* file upload */

.form_formFileUpload {
    font-size: medium;
    margin-bottom: 15px;
    float: left;
    display: block;
    padding: 15px;
    min-height: 30px;
    color: black !important;
    border-radius: 6px;
    cursor: pointer;
    background-color: #eee;
    border: 1px solid #cfcfcf;
}

.form_formFileUpload:hover, .form_formFileUpload:focus {
	background: #e1e1e1;	
}

Working Example

Please select a file to upload.