CSS с вложенными отключенными элементами

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

Обычно я просто играл с непрозрачностью, чтобы заставить его выглядеть правильно. Все, что имеет атрибут disabled, будет иметь частичную непрозрачность.

[disabled] { 
    opacity:0.3; 
}

Однако наш код имеет несколько вложенных элементов, у которых атрибут отключен. Что-то вроде этого:

<div disabled="disabled"> 
    <p disabled="disabled"> 
     <input data-val="true" type="checkbox" value="true" disabled="disabled"> 
     </input> 
    </p> 
</div>

Это упрощенный пример. Некоторые из них отключены еще на несколько уровней!

Каковы результаты с предложенным мной CSS, это непрозрачность, применяемая несколько раз, так что это .3 * .3 * .3 = .027. Это заставляет некоторые элементы почти исчезать, в то время как другие выглядят слишком темными, в зависимости от их «вложенности».

Существует несколько противоречащих друг другу причин, по которым код может отключать элементы, и отчасти это связано с тем, что существует так много ограничений вложенности. Поэтому удаление всех дополнительных атрибутов будет большим количеством работы, а не графика. Я не думаю, что какой-нибудь фантастический псевдоселектор CSS может описать это, но я могу ошибаться. Можем ли мы каким-то образом сделать внешний или внутренний отключенный элемент применимым к непрозрачности? Я попытался использовать [disabled]: last-child (или first-child), но это, похоже, не сделало этого.

CSS был бы лучше, но Javascript или Jquery были бы возможны.

Вот экран, показывающий результат с вложенной непрозрачности:

источник

2015-11-05 gmdavisUX

I «Я не уверен на 100%, но я чувствую, что атрибут« disabled »не предназначен для таких элементов, как' div' и 'p'. http://www.w3.org/TR/html5/disabled-elements.html – Quantastical

Можете ли вы добавить новый класс только к родительскому элементу? В этом случае вам просто нужно установить непрозрачность этого нового класса. – ndd

Можете ли вы опубликовать полный пример кода в своем вопросе, который реплицирует проблему? – j08691

Вам нужно восстановить непрозрачность вложенных disabled элементов следующим образом:

.disabled { 
    opacity:0.3; 
} 
.disabled .disabled { 
    opacity:1; 
}

Смотрите эту рабочую JSFiddle образца.

EDIT:

Та же самая идея, используя [disabled]. См JSFiddle

[disabled] { 
    opacity:0.3; 
} 
[disabled] [disabled] { 
    opacity:1; 
}

источник

2015-11-05 18:15:31

'[disabled]' not '.disabled' – Quantastical

@Quantastical, то же самое относится к' [disabled] '. См. Править. –

Правильно, я просто не хотел путать будущих посетителей с понятием, что отключенный атрибут можно выбрать с помощью селектора классов. Спасибо за обновление. – Quantastical

selector{ 
opacity: x; 
}

непрозрачности наследуемое имущество, поэтому вы должны установить обратно непрозрачность 1, для всех дочерних элементов, или, по крайней мере, для следующего ребенка, как так:

[disabled] { 
opacity: 0.3; 
} 
[disabled] > *:not([disabled]){ 
opacity: 1; 
}

источник

2015-11-05 18:45:38

CSS с вложенными отключенными элементами

ответ

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