Применение стиля ко "всему"

#html #css #webpage

#css #HTML

Вопрос:

Я использую CSS для оформления своей веб-страницы. Я хочу применить следующий CSS к каждому элементу в моей форме без необходимости устанавливать is индивидуально для каждого элемента.

Я надеялся, что есть какой-то символ подстановки, который я мог бы применить здесь.

Вот CSS, который я пытаюсь сделать глобальным:

 .noSelect 
    {
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
        cursor: defau<
        margin:0px;
        padding:0px;
    }

Ответ №1:

Смотрите универсальный селектор

1. Вы имеете в виду, что я могу просто сказать {CSS ЗДЕСЬ }, не указав ничего (или *) впереди? позвольте мне попробовать это очень быстро.

2. Нет, я не говорю, что вы можете использовать «ничего». Вы должны использовать универсальный селектор: *

3. @DalexL, ты бы написал * { ..css attributes here.. } . Пример: Я часто использую селектор, когда хочу видеть границы вокруг всего в целях отладки.

4. в некоторых браузерах отключение ВСЕГО выбора вызывает проблему .. например, textbox — попробуйте выбрать что-нибудь — это становится похоже на текстовое поле только для чтения.

Ответ №2:

Да, используйте универсальный селектор

 html * { ... }

Ответ №3:

Какие теги вы используете в своей форме? Вы могли бы попробовать начать с этого:

 .noSelect, input, textarea, select, label
{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: defau<
    margin:0px;
    padding:0px;
}

1. Не имеете ли вы в виду: .noSelect input, .noSelect textarea, .noSelect select, .noSelect label { ... ?

2. Нет. Я не знаю, как выглядит его HTML, поэтому я не пытался делать какие-либо предположения о иерархии.

Ответ №4:

Вам нужно изменить свой селектор. Вместо .noSelect вы хотите что-то вроде:

 #formID *
{
  /* your css */
}

Если вы делаете это динамически с помощью jquery или чего-то еще, просто добавьте / удалите класс из корневого каталога:

 #formID.inactive *

Ответ №5:

Как насчет:

 .noSelect * {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: defau<
  margin:0px;
  padding:0px;
}

С помощью следующего кода формы:

 <form class="noSelect">
  <!-- stuff here -->
</form>

К сожалению, disabled атрибут не может быть применен к форме (официально). Но, возможно, лучше сделать что-то вроде этого

 <form>
  <label for="i1">Label 1</label>
  <input type="text" id="i1" disabled>
  <label for="i2">Label 2</label>
  <input type="checkbox" value="1" id="i2" disabled>
  <!-- More inputs and stuff. -->
</form>

Если вы используете jQuery, вы можете применить disabled атрибут со следующим в <script> блоке:

 // pre jQuery 1.6 (eg 1.5.x, 1.4.x, 1.3.x, ...)
$('form :input').attr('disabled', true);
// jQuery 1.6 
$('form :input').prop('disabled', true);