Search Widget CSS style HTML5

[RobCubbon]

Hi, I've changed a site to HTML5 and run the CSS through the Dynamik converter

http://dynamiktheme.com/genesis-xhtml-to-html5-css-converter/

All well and good but the search widget refuses to play along with the other HTML elements!

Here is the HTML for the search widget:

`

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

`

And here is the CSS I'm using to style it.

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

In the old XHTML this created a lovely thick input box with a border and an inner shadow. But in HTML5 the padding, border, border radius and shadow declarations don't work. Although the width 100% does.

I've tried endlessly with the selector but nothing works. I've looked for HTML5 form tutorials and the input selector should work.

According to Developer Tools the above CSS should be working but apparently it is not.

I don't understand.

---

Rob Cubbon

[rfmeier]

Hey Rob,

Does this happen to be live? I can take a quick look at it.

---

Ryan Meier – Twitter

[RobCubbon]

Ryan, could I send you a message with the WordPress UN and PW as I don't want a dupe dev site live with links to it?

---

Rob Cubbon

[rfmeier]

Rob,

Sure, no problem. You can e-mail me at rfmeier(at)gmail.com

---

Ryan Meier – Twitter

[rfmeier]

This reply has been marked as private.

[rfmeier]

Rob,

I am seeing the box styled in Chrome, Firefox and even IE 9+. The padding, border, and color looked valid.

However, the box shadow was not appearing for Chrome (webkit). I ran into this issue in the past once and had to dig through some old code.

Here is how I got it to work;

input, select, textarea, form.search-form input {
	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%;
}

webkit-appearance overrides styling to make the element look like 'native' controls. You would think this would be turned off by default. There may be a valid reason it is turned on. Who knows.

If you aren't seeing the padding and border styling, try a hard browser cache reset.

I hope this helps.

---

Ryan Meier – Twitter

[RobCubbon]

Thanks, Ryan, but this must be a Mac issue. I'm seeing the search form as an ugly, default, thin version on my Chrome after repeated refreshes and on a Safari browser that has never viewed the site before. As there is nothing aobut this out there I must be doing something else wrong!!!

---

Rob Cubbon

[RobCubbon]

Discount my earlier message. The above fix from Ryan worked. 🙂

---

Rob Cubbon

[genevishgraphics]

I think I am having a relevant issue myself. I am trying to get RID OF the box-shadow of the Search Box and cannot remove it for Chrome and Safari no matter what I do!
I have tried -moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
On input and search and everything, nothing will get rid of the ugly drop shadow - only Firefox doesnt display the shadow. I am using a Mac, is it mac related or is it mac/browser related or what? Thanks!

[RobCubbon]

Hi, genevishgraphics, are you using the Genesis sample child theme?

Around about line 200 of the style.css you have something like:

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

Just deleting the box-shadow: 0 0 5px #ddd inset; may be the answer?

---

Rob Cubbon

[Author]

Posts