Impossiblue

Styling an HTML input element

The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. How an <input> works varies depending on the value of its attribute.

Attribute examples include autocomplete, name, src, and type.

The latter, for instance, can take one of several values depending on the type of control to display. The default is text and that is used if nothing else is specified. This article will concentrate on the button value. The button is a push (aka click or touch) button with no default behaviour. This is how it might look in HTML:

<input id="myId" type="button" value="1" title="My title">

The default appearance of the button in browsers has been a thorn in the side of designers and developers over the years as restyling (e.g. to fit the overall atmosphere of a web site) has been notoriously difficult to achieve.

You may get away with a simple border- and border-radius-styling and hooray the following on your desktop screen…

…only to wake up to this depressing sight on your iPad:

The appearance property of CSS to the rescue: It is used to display an element using a platform-native styling based on the operating system’s theme. A partial list (excluding vendor-specific identifiers) includes:

appearance: none;
appearance: button;
appearance: checkbox;
appearance: scrollbarbutton-up;

The none in there strips out vendor-specific styling, i.e. no special styling is applied, and (disregarding early bug reports) we will take advantage of it in what follows. Not, however, without a proper warning from MDN:

If you wish to use this property on websites, you should test it very carefully – it is non-standard, and its behavior changes from one browser to another. The differences are smaller in the newest browsers, but historically they have been bigger. In older browsers even the keyword none does not have the same behavior on each form element across different browsers, and some do not support it at all.

With the small print out of the way, here is a starter in CSS:

input[type="button"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	}

That code is supposed to strip out browser specific appearance. We are back to scratch, so to speak, and left to apply our own styling. The example below will (should) produce the square button proper.

The CSS

input[type="button"] {
	/* START Stripping */
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	/* END Stripping */
	/* START Styling */
	width: auto; /* Or left out or specific */
	height: auto; /* Or left out or specific */
	margin-top: .75em; /* Example */
	border: 1px solid #eef5df;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	padding: .7em 1em .5em;
	font: 1.6em "Chunk Five Regular", sans-serif;
	font-weight: normal;
	color: #eef5df;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	background-color: #475f14;
	cursor: pointer;
	display: block;
	/* END Styling */
	/* Note: Shadow added globally via :hover */
	}

The HTML

<input type="button" value="Loop sound" onclick="alert('Add some JavaScript');">

The result

On its own the button does nada. Pared with some JavaScript it has the potential to reinstate tzardom in Russia. That, however, is outside the scope of this rambling.

Note: This article never set out to compare input type="button" to the HTML <button> element. MDN has a springboard for that jump.