input styling

by abhitalks

HTML

<form>
    <label>Option 1: </label>
    <input type="search" pattern="\d*" />
    <input type="submit" value="Search" />
</form>
<br />
<form>
    <label>Option 2: </label>
    <span class="closer"><input type="number" /></span>
    <input type="submit" value="Search" />
</form>

CSS

span.closer {
    display: inline-block;
    position: relative;
}
span.closer::before {
    content: 'Ă—'; font-weight: bold;
    position: absolute;
    left: 4px; top: 2px;
}
span.closer:hover::before {
    color: #00f;
}
input[type=number] {
    padding-left: 16px;
    width: 220px;
}
input[type=number]:invalid {
    border: 1px solid red;
}
input[type=search] {
    width: 240px;
}

JavaScript

$("span.closer").on("click", function(e) {
    if (e.target.tagName == 'SPAN') {
        $(this).children("input").val('');
    }    
});