CSS- Select two input elements

Question

I want to select first two input elements.

  .choicesDiv input[type="radio"]:nth-child(-n+2)
  {
    border: 1px solid yellow;
  }

You should be able to just use .choicesDiv input[type="radio"]:nth-child(1), .choicesDiv input[type="radio"]:nth-child(2) — CollinD
– CollinD, Commented Oct 2, 2015 at 15:37

Andy Furniss · Accepted Answer · 2015-10-02 15:46:59Z

You need to wrap your radio buttons in another element like a label, you can't apply a border directly to a radio button.

See below.

Also, if your intent is to actually set the border of a radio button then you'll need to look into creating custom radio buttons with something like this tutorial: http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-895. It's relatively easy, all you're doing is hiding the radio button and setting the background image of a label to your custom radio button style.

.qaDiv
{
     width: 100%;
     margin: 10px 0;
     border: 1px solid red;
}

.choicesDiv
{
    margin: 5px;
    border: 1px solid green;
}

.choicesDiv label:nth-child(-n+2)
{
    border: 1px solid yellow;
}

<div class="qaDiv" index="">
    <div class="questionDiv">What is your name?</div>
    <div class="choicesDiv">
        <label><input type="radio" name="choices0" value="Gopi">Gopi</label>
        <label><input type="radio" name="choices0" value="Gops">Gops</label>
        <label><input type="radio" name="choices0" value="GopiNath">GopiNath</label>
        <label><input type="radio" name="choices0" value="GopsAB">GopsAB</label>
    </div>
    <div class="answerDiv"></div>
    <div class="explanationToggle"></div>
    <div class="qButtons"></div>
 </div>

sebastian · Accepted Answer · 2015-10-02 15:38:40Z

Try changing the radio type to checkbox. You can only select one radio button, whereas you can select multiple checkboxes

.qaDiv
{
     width: 100%;
     margin: 10px 0;
     border: 1px solid red;
}

.choicesDiv
{
    margin: 5px;
    border: 1px solid green;
}

.choicesDiv input[type="checkbox"]:nth-child(-n+2)
{
    border: 1px solid yellow;
}

<div class="qaDiv" index="">
    <div class="questionDiv">What is your name?</div>
    <div class="choicesDiv">
        <input type="checkbox" name="choices0" value="Gopi">Gopi
        <input type="checkbox" name="choices0" value="Gops">Gops
        <input type="checkbox" name="choices0" value="GopiNath">GopiNath
        <input type="checkbox" name="choices0" value="GopsAB">GopsAB
    </div>
    <div class="answerDiv"></div>
    <div class="explanationToggle"></div>
    <div class="qButtons"></div>
 </div>

Let me know if it helps :)

MozzieMD · Accepted Answer · 2015-10-02 15:42:48Z

0

I don't know why border is not working, it's working with shadow

.choicesDiv input[type="radio"]:nth-child(-n+2)
{
    box-shadow:0px 0px 0px 1px yellow;
}

answered Oct 2, 2015 at 15:42

MozzieMD

3552 silver badges13 bronze badges

2 Comments

Andy Furniss Over a year ago

You can't set the border of a radio button.

MozzieMD Over a year ago

@AndyFurniss i know now, anyway thank you, box-shadow it's working good!

Collectives™ on Stack Overflow

CSS- Select two input elements

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related