Вопросы Теги

Разработайте <маркировка> на основе <вход> состояние

Действительно ли возможно, только с CSS, разработать маркировку HTML, зависящую от состояния ее входа?

В моем случае я хочу разработать <input type="checkbox"> на основе того, проверяется ли это.

Я пытался поместить маркировку во входе, но Firefox и Chrome (по крайней мере), кажется, анализируют их как одноуровневые элементы, даже при том, что они ясно вкладываются во входном источнике. И я не знаю, как записать правило CSS, которое может косвенный через для = атрибут.

Я должен выкрикнуть JavaScript на этом?

9
задан Ken 26 February 2010 в 09:30
поделиться

2 ответа

Их не нужно вкладывать, вот что означает "для Атрибут "для" в элементе

В современных браузерах (поддерживающих CSS 2.1) вы можете использовать одноуровневый селектор, например 

input + label {
  /* rules */
}

. У вас должна быть разметка в строгих одноуровневых отношениях, например: 

<input name="cb" id="cb" type="checkbox"><label for="cb">Checkbox</label>
6
ответ дан 3 November 2019 в 01:55
поделиться

Использование смежного селектора / одноуровневого селектора плюс селектора атрибутов заставит его работать: 

<form>
    <style>
    INPUT[checked=checked] + LABEL {
        color: #f00;    
    }
    </style>
    <div>
        <input type="checkbox" id="chk1" />
        <label for="chk1">Label #1</label>
    </div>
    <div>
        <input type="checkbox" id="chk2" checked="checked" />
        <label for="chk2">Label #2</label>
    </div>
</form>
4
ответ дан 3 November 2019 в 01:55
поделиться