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?

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}

maybe outline: 0!important; will work?