Селекторы форм jquery, переключатели и флажки

0

привет, у меня есть кнопка внутри формы

<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");
});

И он не работает, переключатели не находятся на границе

  • 1
    Вы пытаетесь поставить рамку вокруг каждого переключателя в отдельности?
  • 0
    я согласен с zspencer. Вы могли бы хотеть две вещи здесь. Если вы хотите заменить переключатель по умолчанию на кружок с красной рамкой, вам придется использовать мой ответ ниже. Если вы хотите красную рамку вокруг поля, в котором находится переключатель, просто оберните входные данные в SPAN и стилизуйте их с рамкой с помощью базового CSS.
Показать ещё 3 комментария
Теги:
forms

2 ответа

2

http://css-tricks.com/snippets/css/custom-radio-buttons/

Вот статьи с обходным путем о настройке переключателей. Вы не можете добиться того, чего хотите, только с помощью чистого CSS.

Вам нужно будет создать изображение (проверенное и непроверенное состояние) и использовать приведенный выше код для создания настраиваемых переключателей

Вот еще один способ сделать это:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

РЕДАКТИРОВАТЬ

Если вы хотите, чтобы граница была квадратной границей, а не рамкой вокруг кнопки круга, обратитесь к нижеприведенному ответу: Натан Байерс.

  • 0
    Спасибо за помощь
1

Вы также можете использовать элемент 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>
  • 0
    Спасибо за помощь

Ещё вопросы

Сообщество Overcoder
Наверх
Меню