Style search box (Outreach Pro child theme)

[annemcl]

I'm using Outreach Pro child theme. I'm trying the make the search box smaller (horizontally and vertically), and while I figured out how to change the CSS to make the box smaller, the text within the box remains at a fixed point (it touches the bottom edge) and I can't figure out how to make the default text "Search this web site" center vertically in the new shorter box. I'd also like to change the background color of the box from white to something different, maybe a light blue. I've tinkered with the CSS related to the search form in style.css

URL: temp.sarasotadolphin.org

Here's the revised style sheet info with the box dimensions successfully implemented:

/* Search Form
--------------------------------------------- */

.search-form {
	overflow: hidden;
}

.site-header .search-form {
	float: right;
	margin-top: 12px;
	background-color: #e5d177;
}

.entry-content .search-form,
.site-header .search-form {
	width: 35%;
	height: 30px;
	padding: 0;
}

.genesis-nav-menu .search input[type="submit"],
.widget_search input[type="submit"] {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	padding: 0;
	position: absolute;
	width: 1px;
}

Any help on this is greatly appreciated!

http://temp.sarasotadolphin.org

[neilgee]

You need to address the padding in the input field... and add in a background color.

input[type="search"] {
padding: 6px;
background-color: antiquewhite;
}

You then might want to adjust the placeholder text to complement the background color - here's a guide for reference - http://coolestguidesontheplanet.com/styling-placeholder-text-input-fields-forms-css/

---

Neil Gee
WP Beaches
Coolest Guides

[Author]

Posts