Styling search forms in HTML5

Get Started
1

Hey, getting to grips with HTML5 here.

I don’t understand why I can’t style up a form.

HTML

<form method="get" class="search-form" action="http://website.com/" role="search">
<input type="search" name="s" placeholder="Search this website&#x02026;" />
<input type="submit" value="Search" />
</form>

The following CSS mostly doesn’t work.


input{
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	box-shadow: 0 0 5px #ddd inset;
	padding: 16px;
	padding: 1rem;
	width: 100%;
}

According to Developer Tools the above CSS should be working but apparently it is not. There is no padding, border, border-radius, etc., on the search form.

I’ve tried to use more specific selectors but nothing seems to change the input from being the default one. (although it is stretching to be 100%)

Sorry I can’t show you the site it’s in development.

Would appreciate anyone’s help :slight_smile:

2

You are not styling the input elements correctly. See below:

input[type=“submit”] { declarations }
…applies to input buttons of type “submit”.

Change yours to:

input[type=“search”]{
background-color: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 0 5px #ddd inset;
padding: 16px;
padding: 1rem;
width: 100%;
}

input[type=“submit”]{
background-color: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 0 5px #ddd inset;
padding: 16px;
padding: 1rem;
width: 100%;
}

more: http://css-tricks.com/styling-texty-inputs-only/

3

Thanks Stephen. Actually the input[type=“submit”] was elsewhere in the CSS.

It was because I was viewing on webkit browsers on a Mac.

For some reason, with HTML5 they will style the element to appear like native Mac controls – “-webkit-appearance: none;” rule prevents the default styling.

So this worked:

input [type=“search”] {
background-color: #FFF;
border: 1px solid #DDD;
border-radius: 3px;
box-shadow: 0 0 5px #DDD inset;
padding: 16px;
padding: 1rem;
-webkit-appearance: none; /* remove webkit appearance */
width: 100%;
}