Can i make a Text to an input radio with CSS?

Question

I have to radio button and i want to make for each one a text value, some think like yes and no.

<input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/> 
<input type="radio" name="tabGroup1" id="rad2" class="tab2"/>

I want to khnow if i can just with CSS make a text for these radios?

like :

.tab1{
   content:'Yes';
}
.tab2{
   content:'No';
}

That's what labels are for.... – Paulie_D Oct 27 '15 at 17:04 — Paulie_D, Oct 27 '15 at 17:04

score 1 · Answer 1 · answered Oct 27 '15 at 16:41

1

.tab1:after{
  content: 'Yes';
  margin-left: 1.5em;
}
.tab2:after{
  content: 'No';
  margin-left: 1.5em;
}

Here's an example: http://codepen.io/anon/pen/avGdwB (note the line break in the HTML).

answered Oct 27 '15 at 16:41

Grim...

16,518
7
45
61

Hmm, that's a bugger. I know you're meant to answer the question and not give personal opinions, but while it's possible, you're *far* better just putting the text into the HTML. – Grim... Oct 27 '15 at 17:02
That's because the W3C spec says it shouldn't. - Question a little old but still on point - http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field – Paulie_D Oct 27 '15 at 17:03

score 1 · Answer 2 · answered Oct 27 '15 at 16:44

Use :after for content property.

HTML

<label id="rad1" class="tab1">
  <input type="radio" name="tabGroup1" checked="checked"/>
</label>
<label id="rad2" class="tab2"> 
  <input type="radio" name="tabGroup1"/>
</label>

CSS

.tab1:before{
  content:'Yes';
}
.tab2:before{
  content:'No';
}

Demo

score 1 · Accepted Answer · answered Oct 27 '15 at 17:09

Inputs aren't supposed to have pseudo-elements per the W3C spec although some browsers have decided to implement them anyway.

Ideally you should use actual text in a label but if you chose not to you can use a label anyway and put the pseudo-element on that.

.tab1 + label:before {
  content: 'Yes';
  display: inline-block;
}
.tab2 +label:before {
  content: 'No';
  display: inline-block;
}

<input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" />
<label for="rad1"></label>
<input type="radio" name="tabGroup1" id="rad2" class="tab2" />
<label for="rad2"></label>

Can i make a Text to an input radio with CSS?

3 Answers3