Reply To: Search Widget in Announcement bar

[Sushil Adhikari]

That is going to be a little tricky because you have to customize the search form’s input fields from the bootstrap.css file found in the theme’s css folder and line 392

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.form-control {
	display:block;
	width:100%;
	height:36px;
	padding:4px 12px;
	
	line-height:1.65;
	color:#555;
	background-color:#fff;
	background-image:none;
	border:1px solid #ccc;
	border-radius:4px;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
	-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s
}

There’s also the button styling you need to modify as well, which is found line 610

.input-group-btn>.btn {
position: relative;
height: 2.250rem;
}

…and also line 460:

.btn{
	display:inline-block;
	margin-bottom:0;
	font-weight:normal;
	text-align:center;
	vertical-align:middle;
	cursor:pointer;
	background-image:none;
	border:1px solid #ccc;
	white-space:nowrap;
	padding: 0.250rem 1.25rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	line-height:1.65;
	background-color: #eee;
	color: #666666;
}

The issue here is that these styles also control other form elements as well, so you would have to target that specific widget in that specific location (widget position) with your custom CSS, otherwise you affect other parts of your site. This will require some careful CSS coding to target only that one. I strongly recommend you keep a backup of your site before doing this. I also hope you are using a child theme or at least a plugin to Customize CSS.