привет, у меня есть кнопка внутри формы
<tr>
<td class="style2">
gender
</td>
<td>
<input id="male" type="radio" checked="checked"/>m
<input id="female" type=radio />f
</td>
</tr>
Я хочу добавить границу к переключателю так:
$("document").ready(function(){
$("form :input").css("border", "3px solid red");
$("form :radio").css("border", "3px solid red");
});
И он не работает, переключатели не находятся на границе
http://css-tricks.com/snippets/css/custom-radio-buttons/
Вот статьи с обходным путем о настройке переключателей. Вы не можете добиться того, чего хотите, только с помощью чистого CSS.
Вам нужно будет создать изображение (проверенное и непроверенное состояние) и использовать приведенный выше код для создания настраиваемых переключателей
Вот еще один способ сделать это:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
РЕДАКТИРОВАТЬ
Если вы хотите, чтобы граница была квадратной границей, а не рамкой вокруг кнопки круга, обратитесь к нижеприведенному ответу: Натан Байерс.
Вы также можете использовать элемент span вокруг ваших элементов ввода. Если вы хотите, чтобы ограничители были ограничены, используйте следующее:
<table>
<tr>
<td class="style2">gender
</td>
<td>
<span class="redBorder">
<input id="male" type="radio" checked="checked" />
</span>
m
<span class="redBorder">
<input id="faemale" type="radio" />
</span>
f
</td>
</tr>
</table>
<script>
$("document").ready(function () {
$(".redBorder").css("border", "3px solid red");
});
</script>