CODEWITHSUNDEEP
cssinputbordertextfield
AMC
AMC

Reputation: 1695

remove border around search field only

I'm trying to remove the pesky border around a single search box, not all text/input fields.

I believe this to be the culprit - 

input[type=text],
input[type=email],
input[type=password],
textarea {
    background:none;
    border: 1px solid #ddd;
    padding:14px 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

To remedy, I've tried (to no avail)-

#searchform #s {
    border: none !important;
}

Is there is better (ie - working) way to achieve this effect? I want to keep the border on all other text/input fields, only removing on the single search field..

Live site.

Upvotes: 0

Views: 6268

Answers (2)

DuddiMai
DuddiMai

Reputation: 56

if you have the search input field in some context that other inputs are not in, you could target that.

Example: if its inside a <header> you could do this:

header #searchform #s {
    border: none;
}

but mabye show us your html and divs around your input field :)

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99484

You don't need to use !important in this case. Even more, there's probably no need to use #searchform #s because the #s selector itself has a higher specificity than the input[type=text].

Hence, the following could be sufficient:

#s { border: 0; }

Upvotes: 1

Related Questions