Проблема с CSS относительно радиообъектов

У меня есть HTML, который я не могу изменить, и мне нужно применить стили CSS для элементов ввода внутри него (тип: радио). Но я не могу этого сделать. Уже потратил часы, пытаясь заставить его работать. Возможно ли это?Проблема с CSS относительно радиообъектов

Вот пример того, что я хочу реализовать:

http://jsfiddle.net/Raimondss/pKdr4/26/

.radio { 
    position: relative; 
    float: left; 
    clear: left; 
    display: block; 
    padding-left: 40px; 
    margin-bottom: 12px; 
    line-height: 22px; 
    font-size: 18px; 
    color: #666; 
    cursor: pointer; 
}

Один из <input> элементов внутри <span> элемента, и из-за того, что она не работает, как и другие кнопки. У меня есть требование поместить все мои <input> элементов внутри этих элементов <span>, но потом он просто перестает работать для меня. Есть ли у кого-нибудь какие-либо предложения относительно того, как это можно сделать и как мне изменить свой CSS? Как я могу поместить <input> элементов в теги <span> и все еще иметь функциональные возможности?

P.S. <input> элемент может также иметь класс.

источник

2015-03-26 Raimonds Sokoļvjaks

Если вы хотите использовать только CSS-решение, вы не можете не менять свою разметку. Вложенным первым элементом ввода в элемент '', вы не сможете пройти один уровень до DOM и получить доступ к соседнему элементу ''. CSS не имеет возможности идти «вверх по течению». – Terry

Терри, спасибо за ваш комментарий. Я также не мог найти никакой информации о том, как реализовать это, используя CSS-only, но я хотел быть уверенным, что для этого нет обходного пути. Я работаю с ADF и генерирует HTML для элемента '' с '' элементом внутри ''. Почему они это сделали? –

Эта линия

input[type="radio"]:checked + label:before

означает любое <label>, примыкающий к input[type="radio"]:checked. Первый из них не смежен из-за диапазона.

Если вы поместите их все в пролеты, это не сработает по той же причине.

Вариант 1

Если вы можете использовать JavaScript вы можете пометить span выбранного radio и использовать что-то вроде

span.checked-in-me + label:before

Вариант 2

Если поставить метку в span вместе с input - это вариант, который может помочь.

источник

2015-03-26 11:02:53 JNF

Привет, JNF! ** Вариант 2 ** не вариант для меня в моем случае, потому что я не могу изменить HTML. Но, может быть, я придумаю что-то, используя ** Вариант 1 **. Спасибо вам за это! –

Проблема с CSS относительно радиообъектов

ответ

Смежные вопросы