Как выбрать переключатель в CSS

Question

У меня возникли проблемы с редактированием моих переключателей с помощью CSS, потому что я не могу понять, как правильно обращаться к ним. Мой код для них заключается в следующем:

<div class="wrapper"> 
<h1 class="testTitle"> Letter Height</h1> 

<h2 class="testIns">Press the buttons to make it shorter or taller!</h2> 

<div id="testBox"> 
<img src="images/testImages/height/heightMid.gif"> 
</div> 

<form method="get" action="width.php" class="testAns" id="heightAns"> 
<input type="radio" name="height" value="short" onchange="ChangeDisplay('short');">Shorter height 
<input type="radio" name="height" value="mid" onchange="ChangeDisplay('mid');">Normal height 
<input type="radio" name="height" value="tall" onchange="ChangeDisplay('tall');">Taller height 
<br> 
<h2 class="confirm">Does this look good? If so, please click the <span class="testSubmit">"Submit"</span> button.</h2> 

<span class="submit"><input type="submit"></span> 
</form> 
</div> 

Так переключатели находятся внутри DIV под названием «обертка», и внутри формы с классом = «testAns» и ид = «heightAns». Я хочу, чтобы иметь возможность редактировать радиокнопок и текст вокруг них, но единственное, что я могу заставить работать это:

.testAns {code;} 

Но это подчеркивает всю форму, а не только радио-кнопки. Я уже пробовал несколько комбинаций класса и формы и т. Д., Но я не могу заставить их работать. Странно, что CSS кнопки отправки работает очень хорошо, что является частью формы, класса и идентификатора. Его рабочий код:

form input[type=submit] {code;} 

Может ли кто-нибудь дать мне некоторое представление?

Answer 1

Добавить класс к переключателям «я» вместо «обертывания».

form.html

<form method="get" action="width.php" id="heightAns"> 
    <input class="testAns" type="radio" name="height" value="short" onchange="ChangeDisplay('short');">Shorter height 
    <input class="testAns" type="radio" name="height" value="mid" onchange="ChangeDisplay('mid');">Normal height 
    <input class="testAns" type="radio" name="height" value="tall" onchange="ChangeDisplay('tall');">Taller height 
    <br> 
    <h2 class="confirm">Does this look good? If so, please click the <span class="testSubmit">"Submit"</span> button.</h2> 

    <span class="submit"><input type="submit"></span> 
</form> 

style.css

.testAnd { 
    css code... 
} 

Answer 2

Вы можете использовать

input[type=radio] { 
    /* some code */ 
} 

Answer 3

Большинство браузеров предлагают ограниченный стиль кнопки радио так что некоторые стили может не отображаться делать что-либо. Код, который нужно в CSS, чтобы поймать входы радио является input[type=radio] {margin: 10px;}

Вы можете применить дополнительные или альтернативные стили, когда переключатель проверяется с помощью input[type=radio]:checked {margin: 5px;}