CSS » Web Мастерская | Блог

Блог

Web Мастерская

Не использовать "cursor: pointer" если элемент "disabled"

Есть выбор из перечисленного:

<input type="radio" class="choice" id="choice1" name:"action" />
<label class="categorylabel" for="choice1">
	<div>
		<!-- -->
	</div>
</label>

<input type="radio" class="choice" id="choice2" name:"action" disabled />
<label class="categorylabel" for="choice2">
	<div>
		<!-- -->
	</div>
</label>

На одном input прописан: disabled (Запрет использовать). Стояла задача менять курсор при наведении на label, но не менять курсор, если элемент имеет: disabled. Для решения этой задачи использовался следующий CSS код:

input[type="radio"][disabled] {
  cursor: default;
}

input[type="radio"]:not([disabled]) + label {
  cursor: pointer;
}

Теперь, если у тега есть: disabled, курсор не меняется на указательный палец, остаётся стрелочкой....

Жалоба

CSS переменные в SVG

CSS SVG

На данный момент работаю с SVG. Практически в каждом теге есть код цвета. В основном использую одни и те же цвета, пока их всего пять. Думаю, что в будущем цвет буду менять, придётся копаться в нескольких файлах, производить замену. Тут задумался - а ведь проще написать переменные и использовать их, в будущем не придётся рыться в нескольких файлах, а отредактировать всего один. Так я и сделал, я добавил переменные в SVG. Сейчас расскажу, как я это сделал.

Я создал файл: "svg.css", с таким содержимым:

:root {
	--cool:   #0074FF; /* Оттенок синего */
	--murk:   #033C59; /* Оттенок синего + зелёного */
	--spring: #48CFAD; /* Оттенок зелёного */
	--smoke:  #CCD3EB; /* Оттенок серого */
	--fire:   #FC6459; /* Оттенок красного */
}

Подключил "svg.css" к документу. Теперь в SVG меняю:

<g fill="#0074FF">

На:

<g fill="var(--cool)">

Готово. Переменная отдаёт указанный ей код цвета.

CSS переменная должна начинаться с двойного дефиса (--)....

Жалоба

Как посчитать количество элементов на чистом CSS

CSS

Допустим у нас есть блок с ID block, в котором находятся элементы (<span> или другие), и нам надо посчитать их на чистом CSS:

<div id="block">
    <span></span>
    <span></span>
    <span></span>
</div>

Добавим блок, для вывода количества элементов:

<div id="sum"></div>

Затем считаем на чистом CSS:

#block {
	counter-reset: block;
}

#block > span {
	counter-increment: block;
}

#sum:before {
	content: counter(block);
}

CSS посчитает элементов в блоке и выведет результат в блок <div id="sum"></div>....

Жалоба

Как убрать стрелочки в поле <input type="number">

CSS HTML

Чтобы убрать стрелочки у поля number добавьте свойство CSS:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

Для браузера Firefox можно использовать:

input[type='number'] {
	-moz-appearance: textfield;
}

...

Жалоба

Стиль маркировочного списка

CSS HTML

Чтобы составить список, используют тег <li> внутри <ul> или <ol>:

<ul>
	<li>1 элемент списка.</li>
	<li>2 элемент списка.</li>
	<li>3 элемент списка.</li>
</ul>

<ol>
	<li>элемент списка.</li>
	<li>элемент списка.</li>
	<li>элемент списка.</li>
</ol>

В этом случае, браузер отобразит списки стандартного вида:

1 элемент списка.
2 элемент списка.
3 элемент списка.

элемент списка.
элемент списка.
элемент списка.

Чтобы изменить марке, установите тегу <ul> CSS свойство list-style-type:

ul {
	list-style-type: disc;
}

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

Если необходимо изменить цвет маркера, используйте свойство:

li::marker {
	color: #008800;
}

Вместо зеленного цвета (#008800) можете написать любой другой.

Можно использовать свою картинку, как маркер. И для этого существует свойство:

li {
	list-style-image: url('marker.png');
}

Где marker.png - это Ваша картинка....

Жалоба