CODEWITHSUNDEEP
htmlcssinputfocus
Dee
Dee

Reputation: 255

Disable Browser Input Field Effects?

Okay, I'm trying to get rid of all these little things browsers do to input fields (like focus borders and what not).

input[type="text"] {
    font:bold 10px/12px verdana,arial,serif;
    padding: 20px;
    border-radius: 15px; 
}

input[type="text"]:focus {
    outline: none!important; 
}

The code above does not work. I also tried editing the input via the 2.1 way ( 

input.text { /*stuffhere*/};
input.text:focus{ outline: none; }

). It didn't work. Anybody have any ideas?

Upvotes: 4

Views: 3538

Answers (2)

Greg Pettit
Greg Pettit

Reputation: 10830

I'm at a loss; you seem to be doing it correctly. Border for the normally-visible border, and outline for the focusy thing.

Have a look at this fiddle and see if it's working as expected. If it does (as it does for me), it could be conflicting CSS in your case. !important is a dangerous and powerful tool, but it's still no guarantee.

http://jsfiddle.net/LQppm/1/

input[type="text"] {border: none}
input[type="text"]:focus {outline: none}

Upvotes: 3

Alon Eitan
Alon Eitan

Reputation: 12025

maybe outline: 0!important; will work?

Upvotes: 0

Related Questions