Changing style of input without display:none

Question

A common way to replace a standard input is display:none the input, and then add a background-image to the label.

CSS:

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"]+label {
  background: url('../images/checkbox_unchecked.png') left center no-repeat;
  background-size: 25px;
}
input[type="checkbox"]:checked+label {
  background: url('../images/checkbox_checked.png') left center no-repeat;
  background-size: 25px;
}

The problem: The HTML is broken afterwards. When i want to change the direction of the elements, I have to change it inside the CSS (background: right).

How can I change the image/style of an input field without make it display:none first, and then change the background image? It has to work in Android 2.3.

EDIT: JSFiddle.

You specified that it needs to work in older browsers - how old? — Radicate
– Radicate, Commented Oct 13, 2014 at 10:02
@Don Android 2.3 stock. And yes. i want to add a simple rtl to change the direction. — ohboy21
– ohboy21, Commented Oct 13, 2014 at 10:06

James Donnelly · Accepted Answer · 2014-10-13 10:10:29Z

2

The simple fix for your rtl issue (assuming that is the main problem here, based on your JSFiddle demo), is to also style on the dir attribute when set to "rtl":

.styles[dir="rtl"] input[type="radio"]+label {
    background-position: right;        /* Set the background position to the right. */
    padding-left: 0;                   /* Reset the left padding on the label. */
    padding-right: 35px;               /* Give the label some right padding. */
}

JSFiddle demo.

Everything I've used above should work on Android 2.3 according to Can I Use....

edited Oct 13, 2014 at 10:10

answered Oct 13, 2014 at 10:05

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jivings · Accepted Answer · 2014-10-13 10:09:12Z

0

You can some css that acts on the rtl attribute:

.styles[dir="rtl"] input[type="radio"]+label {
   padding: 0 35px 0 0;
   background-position: right center;
}

Here's your demo on jsfiddle: http://jsfiddle.net/ab0xwfcs/2/

answered Oct 13, 2014 at 10:09

Jivings

23.3k7 gold badges63 silver badges102 bronze badges

Comments

Radicate · Accepted Answer · 2014-10-13 10:54:19Z

I'm not sure about the support of this method, but you could also use the CSS :before instead of setting background positions for each direction.

.styles input[type="radio"] {
  display: none;
}
.styles input[type="radio"]+label:before {
    content:"";
    display:inline-block;
    width:25px;
    height:25px;
    background:red;
}
.styles input[type="radio"]:checked+label:before {
    content:"";
    display:inline-block;
    width:25px;
    height:25px;
    background:pink;
}

Demo on jsfiddle

You can also use this method on the input itself, without setting it's display to none. (This will create an extra element, that will hide the default one under.)

input[type="radio"]:after {
    content:"";
    display:inline-block;
    width:25px;
    height:25px;
    background:gray;
}
input[type="radio"]:checked:after {
    content:"";
    display:inline-block;
    width:25px;
    height:25px;
    background:pink;
    position:relative;
}

Collectives™ on Stack Overflow

Changing style of input without display:none

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related