щелчок на ярлыке «для» как тега привязки и ввода тега

Я не могу получить эту работу, похоже, не представляется возможным, поэтому я прошу ...щелчок на ярлыке «для» как тега привязки и ввода тега

Это CSS используется:

label.btn { 
    cursor:pointer; 
    display:inline-block; 
} 
label.btn>input[type=checkbox] { 
    display:none; 
} 
label.btn>input[type=checkbox]:checked~b { 
    background:red; 
} 
/* not relevant, just for testing purpose */ 
#divtest { 
    margin-top:1500px 
}

После HTML код будет проверять ввод, а затем стиль для тега <b> применяется:

<a href="#divtest" id="anchor"> 
    <label class="btn"> 
     <input type="checkbox"/><b>Click should scroll to '#divetest' element and check input for styling!</b> 
    </label> 
</a>

DEMO styling

Если я добавить атрибут «для» на этикетке целевой якорный тег, браузер по умолчанию прокрутка работает, но не более укладка не применяется:

<label class="btn" for="anchor">

DEMO anchor

Теперь, очевидный вопрос:

Могу ли я заставить эти оба поведения работать вместе в чистом CSS?

источник

2013-07-30 A. Wolff

Что вы ожидаете от типа ввода: checkbox INSIDE a anchor. При нажатии кнопки привязки браузер переместится на #divtest, на ярлыке браузер установит фокус на «ввод», а щелчок на «входе» будет похож на нажатие на крайний якорь. –

Элемент input внутри a нарушает здравый смысл, а также HTML5 CR. Вложение двух интерактивных элементов вызывает проблему, которая активируется при щелчке мыши.

Вместо такой конструкции используйте правильную и разумную разметку HTML. Тогда, пожалуйста, сформулируйте вопрос о стиле в плане желаемого или ожидаемого рендеринга против фактического рендеринга, вместо того, чтобы говорить, что «это» «не работает».

источник

2013-07-30 17:48:53

Это замечательная и актуальная информация, thx. Мне не хотелось быть слишком расплывчатым в моем вопросе, извините за это. –

Это не сработает, так как флажок Вход: ВНУТРИ <label>. Браузеры будут фокусироваться на вводе при щелчке по метке.

источник

2013-07-30 17:34:01

Вот что я вижу и думаю, не возможно! Я искал ниндзя гуру со специальным трюком, если вообще ... В любом случае, тх для вашего ответа. –

Есть трюк: не устанавливайте флажок внутри этикетки. – GolezTrol

@GolezTrol, и тогда как вы примените стиль, например, используя псевдокласс класса ': checked'? Я уже пытаюсь использовать ': active', но это не поведение, которое я ожидаю. Если бы мой пример был неправильным, я должен был опубликовать его с помощью переключателя, а не флажка, так как я хочу, чтобы стиль был устойчивым. Надеюсь, ты понимаешь, что я имею в виду ?! –

щелчок на ярлыке «для» как тега привязки и ввода тега

ответ

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