复选框：删除焦点上的正方形

Question

How can I remove the small square arround the radio button that gets displayed when the input gets focused?

I'm pretty sure this is a duplicate, but I don't know what the square is actually called and couldn't find what I'm looking for.

I tried autocomplete="off" on the input. I played arround with jQuery's preventDefault but without success.

Update: Thanks for your responses. If anyone comes accross this question, here is the effect of appearance attached (upper pic without appearance, the one below is with appearance) with Firefox:

Just in case someone comes to the same problem.

Update with Chrome / Safari, appearance removes the input

-webkit-appearance: none; would make the radio buttons disappear in Chrome and Safari. check jsfiddle.net/8uY6H (with Chrome)

– noted by JFK 6

Answer 1

Try this CSS since it is an outline:

input[type="radio"]:focus {
    outline:none;
}

Answer 2

Try outline:0 property for the radio button on focus

input[type="radio"]:focus{
    outline:0;
}

Answer 3

You need to set:

outline:none;

On the :focus state of the CSS class relating to the checkbox, or directly eg

input[type="radio"]:focus{
    outline:none;
}

The crucial part is setting outline

The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule. In most cases the use of this shortcut is preferable and more convenient.

However, also setting appearance may help cross platform where different browsers render checkbox elements differently.

As noted in the comments below though, this will cause the checkbox to not display in some circumstances- so you would need to produce a pure CSS solution.

The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme.

This property is frequently used in XUL stylesheets to design custom widgets with platform-appropriate styling. It is also used in the XBL implementations of the widgets that ship with the Mozilla platform.

Answer 4

As simple as

input[type="radio"] {
    outline: 0 none;
}

JSFIDDLE