Html формы для сайта

Содержание:

The CSS Grouping Selector
- Example
All CSS Simple Selectors
Methods
Атрибуты
HTML Справочник
HTML Теги
Создание пользовательского меню выбора
- - - Шаг 1) добавить HTML:
- Пример
  - - Шаг 2) добавить CSS:
- Пример
  - - Шаг 3) добавить JavaScript:
- Пример
The CSS class Selector
- Example
- Example
- Example
Pseudo-classes
CSS Reference
CSS Properties
Установка и настройка плагина выпадающего меню WordPress
CSS Advanced
Основные стили
- Пример
CSS Properties
CSS Tutorial
Часто задаваемые вопросы
- Как на одной странице сделать два селекта разного вида
- В прозрачной части cuSel виден фон, который находится под ним
- Как убрать подсветку select при наведении и получении фокуса (update)
JavaScript
CSS Reference
CSS Properties
Заключение

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style
definitions.

Look at the following CSS code (the h1, h2, and p elements have the same
style definitions):

h1
{
text-align: center; color: red;
}h2
{

text-align: center; color: red;}p
{
text-align: center; color: red;
}

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

Example

In this example we have grouped the selectors from the code above:

h1, h2, p
{

text-align: center; color: red;}

All CSS Simple Selectors

Selector	Example	Example description
#id	#firstname	Selects the element with id=»firstname»
.class	.intro	Selects all elements with class=»intro»
element.class	p.intro	Selects only <p> elements with class=»intro»
*	*	Selects all elements
element	p	Selects all <p> elements
element,element,..	div, p	Selects all <div> elements and all <p> elements

Элементы html формы

❮ Previous
Next ❯

Methods

Method	Description
[index]	Returns the <option> element from the collection with the specified index (starts at 0).Note: Returns null if the index number is out of range
[add(option[,index])]	Adds an <option> element into the collection at the specified index. If no index is specified, it inserts the option at the end of the collection
item(index)	Returns the <option> element from the collection with the specified index (starts at 0).Note: Returns null if the index number is out of range
namedItem(id)	Returns the <option> element from the collection with the specified id.Note: Returns null if the id does not exist
remove(index)	Removes the <option> element with the specified index from the collection

Css макет — свойство position

Атрибуты

Атрибут	Значение	Описание
autofocus	autofocus	Указывает, что раскрывающийся список должен автоматически фокусироваться при загрузке страницы
disabled	disabled	Указывает, что раскрывающийся список должен быть отключен
form	form_id	Определяет, к какой форме относится раскрывающийся список
multiple	multiple	Указывает, что одновременно можно выбрать несколько параметров
name	name	Определяет имя раскрывающегося списка
required	required	Указывает, что пользователь должен выбрать значение перед отправкой формы
size	number	Определяет количество видимых параметров в раскрывающемся списке

@media

HTML Справочник

HTML Теги по алфавитуHTML Теги по категорииHTML ПоддержкаHTML АтрибутыHTML ГлобальныеHTML СобытияHTML Названия цветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор кодировокHTML URL кодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP методыКовертер PX в EMКлавишные комбинации

HTML Теги

<!—…—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

Создание пользовательского меню выбора

Шаг 1) добавить HTML:

Пример

<!—surround the select box within a «custom-select» DIV element.Remember
to set the width:—><div class=»custom-select» style=»width:200px;»>
<select>    <option value=»0″>Select car:</option>
<option value=»1″>Audi</option>    <option
value=»2″>BMW</option>    <option
value=»3″>Citroen</option>    <option
value=»4″>Ford</option>    <option value=»5″>Honda</option>
<option value=»6″>Jaguar</option>    <option value=»7″>Land
Rover</option>    <option value=»8″>Mercedes</option>
<option value=»9″>Mini</option>    <option
value=»10″>Nissan</option>    <option
value=»11″>Toyota</option>    <option
value=»12″>Volvo</option> </select></div>

Шаг 2) добавить CSS:

Пример

/*the container must be positioned relative:*/.custom-select {
position: relative; font-family: Arial;}.custom-select select {
display: none; /*hide original SELECT element:*/}.select-selected {
background-color: DodgerBlue;}/*style the arrow inside the select
element:*/.select-selected:after { position: absolute;
content: «»; top: 14px; right: 10px; width: 0;
height: 0; border: 6px solid transparent; border-color: #fff
transparent transparent transparent;}
/*point the arrow upwards when the select box is open (active):*/.select-selected.select-arrow-active:after
{ border-color: transparent transparent #fff transparent;
top: 7px;}
/*style the items (options), including the selected item:*/.select-items
div,.select-selected { color: #ffffff; padding: 8px 16px;
border: 1px solid transparent; border-color: transparent transparent
rgba(0, 0, 0, 0.1) transparent; cursor: pointer;}/*style items (options):*/
.select-items { position: absolute; background-color:
DodgerBlue; top: 100%; left: 0; right: 0;
z-index: 99;}/*hide the items
when the select box is closed:*/.select-hide { display: none;
}
.select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1);}

Шаг 3) добавить JavaScript:

Пример

var x, i, j, selElmnt, a, b, c;/*look for any elements with the class
«custom-select»:*/x = document.getElementsByClassName(«custom-select»);
for (i = 0; i < x.length; i++) { selElmnt = x.getElementsByTagName(«select»); /*for each element, create a new
DIV that will act as the selected item:*/
a = document.createElement(«DIV»); a.setAttribute(«class»,
«select-selected»); a.innerHTML = selElmnt.options.innerHTML;
x.appendChild(a); /*for each element, create a new DIV that will
contain the option list:*/ b = document.createElement(«DIV»);
b.setAttribute(«class», «select-items select-hide»); for (j =
1; j < selElmnt.length; j++) {    /*for each option in the
original select element,    create a new DIV that will act
as an option item:*/    c = document.createElement(«DIV»);
c.innerHTML = selElmnt.options.innerHTML;
c.addEventListener(«click», function(e) {
/*when an item is clicked, update the original select box,
and the selected item:*/        var y,
i, k, s, h;        s =
this.parentNode.parentNode.getElementsByTagName(«select»);
h = this.parentNode.previousSibling;
for (i = 0; i < s.length; i++) {
if (s.options.innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName(«same-as-selected»);
for (k = 0; k < y.length; k++) {
y.removeAttribute(«class»);
}
this.setAttribute(«class», «same-as-selected»);
break;          }
}        h.click();
});    b.appendChild(c); } x.appendChild(b);
a.addEventListener(«click», function(e) {
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
e.stopPropagation();      closeAllSelect(this);
this.nextSibling.classList.toggle(«select-hide»);
this.classList.toggle(«select-arrow-active»); });}function closeAllSelect(elmnt) { /*a function that will
close all select boxes in the document, except the current select
box:*/ var x, y, i, arrNo = []; x =
document.getElementsByClassName(«select-items»); y =
document.getElementsByClassName(«select-selected»); for (i = 0; i <
y.length; i++) {    if (elmnt == y) {
arrNo.push(i)    } else {
y.classList.remove(«select-arrow-active»);    }
} for (i = 0; i < x.length; i++) {    if (arrNo.indexOf(i))
{      x.classList.add(«select-hide»);
} }}/*if the user clicks anywhere outside the select box,then
close all select boxes:*/document.addEventListener(«click», closeAllSelect);

❮ Назад
Дальше ❯

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the
class name.

Example

In this example all HTML elements with class=»center» will be red and center-aligned:

.center { text-align: center; color: red;}

You can also specify that only specific HTML elements should be affected by a class.

Example

In this example only <p> elements with class=»center» will be
red and center-aligned:

p.center { text-align: center; color: red;}

HTML elements
can also refer to more than one class.

Example

In this example the <p> element will be styled according to class=»center»
and to class=»large»:

<p class=»center large»>This paragraph refers to two classes.</p>

Note: A class name cannot start with a number!

Pseudo-classes

A pseudo-class is a simple selector that is used to select what cannot be selected using other selectors or can be selected, but in a rather difficult way.

Pseudo-class	Description	CSS
:link	Select all not visited links.	1
:visited	Select all visited links.	1
:active	Select the active link.	1
:hover	Select a link when you hover the mouse.	1
:focus	Select the input element that is in focus.	2
:first-child	Selecting each element, which is the first child of its parent.	2
:lang(language)	Selects each element with a attribute whose value begins with en.	2
:first-of-type	Selects each element, which is the first of the elements of its parent element.	3
:last-of-type	Select each element, which is the last of the elements of its parent element.	3
:only-of-type	Select each element, which is the only element of its parent element.	3
:only-child	Select each element, which is the only child of its parent element.	3
:nth-child(n)	Select each element, which is the second child of its parent element.	3
:nth-last-child(n)	Selects each element, which is the second child of its parent element, counting from the last child element.	3
:nth-of-type(n)	Selects each element, which is the second child of its parent element.	3
:nth-last-of-type(n)	Select each element, which is the second child of its parent element, counting from the last child element.	3
:last-child	Select each element, which is the last element of its parent element.	3
:root	Select the root element in the document.	3
:empty	Select each element that does not contain child elements (including text).	3
:target	Select the current target element on the page, that is, the element to which the link was moved inside the page.	3
:enabled	Select each enabled .	3
:disabled	Select each disabled .	3
:checked	Select the element, that is selected by default or by the user.	3
:not(selector)	Selects all elements except the element.	3

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Установка и настройка плагина выпадающего меню WordPress

Итак, для создания выпадающего меню WordPress нам для начала нужно установить плагин Mega Main Menu из репозитория.

1.Заходим в админку WordPress и переходим в раздел «Плагины» => «Добавить новый».
2.В строку поиска вставляем название, ждем, пока пройдет поиск, в результатах поиска выбираем нужный нам плагин и жмем на кнопку «Установить», а затем «Активировать».
3.Далее, нам нужно перейти в раздел «Внешний вид» => «Меню» и здесь создать новое, или выбрать уже существующее меню, которое мы хотим сделать выпадающим. Для наглядности и экономии времени я заранее сделала заготовку, которое имеет в разделе «Каталог» два уровня вложенности.
4.Для начала работы с плагином нам нужно включить его в левой панели управления, в разделе «Настройка Max Mega Menu»
5.Здесь же мы можем в графе «Событие» выбрать, при каких действиях пользователя будет открываться пункты меню.

Доступно для выбора три варианта:

Hover intent – тоже самое, что и «Наведение мышки»

Наведение мышки — открывается при наведении указателя мышки на пункте

Клик мышки – открывается при клике указателем мышки по пункту
6.В графе «Эффект» мы можем выбрать эффект при открытии выпадающего меню WordPress

И скорость, с которой оно будет открываться:
7.Далее, при наведении указателя мышки на пункт меню, возле его названия появляется синяя кнопка «Мега Меню», нажав на которую мы откроем окно настроек для данного пункта.
8.Во вкладке открывшегося окна «Мега Меню» мы можем:
- В разделе «Режим отображения» выбрать способ расположения элементов. Если мы выберем пункт «Выпадающее меню», то в результате мы получим стандартное выпадающее меню WordPress, где пункты будут открываться при наведении на них указателя мышки, либо клике по ним.
  
  Если же мы выберем пункт «Мега Меню» то в раскрывающейся области подпункты будут располагаться в столбик:
- В раскрывающемся списке, который расположен рядом с настройкой режима отображения мы можем выбрать и добавить в открывающуюся область любой из доступных виджетов
- В следующем раскрывающемся списке мы можем изменить количество столбцов, в которых будут располагаться наши пункты и добавленные виджеты.
9.На вкладке «Settings» вы можете скрыть надпись или стрелку, отключить ссылку, отключить отображение элемента на мобильных устройствах или компьютерах, задать настройки выравнивания для самого элемента, иконки и подменю, а так же можно отключить отображение подменю на мобильных устройствах.
10. На следующей вкладке мы можем задать иконку для пункта меню.

В бесплатной версии плагина доступны для использования только стандартные иконки. Иконки Font Awesome, Genericons и возможность добавления своих иконок доступна только для Pro-версии.
11.Далее нам нужно перейти в раздел «Мега Меню» на главной странице WordPress. Здесь нам нужны две вкладки: «Темы меню» и «Локации меню»
12. На вкладке «Темы меню» нам нужно задать тему цветового оформления для нашего выпадающего меню WordPress, так как в этом плагине нет стандартных заготовок.

Переключаясь по вкладкам раздела вам нужно задать настройки цвета, отступы, высоту, шрифты, рамки, тени и другие визуальные настройки в соответствии с цветовым оформлением вашего сайта. После того, как вы зададите все настройки, не забудьте нажать на кнопку «Сохранить изменения».

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Основные стили

Сперва сбросим параметры текста.

Свойство наследует все стили от контейнера(ов). Иногда при сбросе CSS указывают размер шрифта , но в этом нет необходимости. будет наследовать стили всех своих параметров: , , , , , и (если установлено). Ещё он добавляет высоту строки . В-общем, шрифт будет адаптироваться к изменениям, которые касаются всей страницы, либо с помощью надстроек, либо через настройки браузера/системы.

Если пользователь (или автор) изменяет параметры текста, чтобы повлиять на расстояние между буквами, это не будет касаться предустановленных для поля значений. Наследование параметров не повлияет на межбуквенное расстояние, поэтому нужно явно указать необходимость наследования значения . Это поможет соответствовать требованиям

Аналогично межбуквенному , значение для управления интервалами между словами не будет наследоваться, если это не объявить явным образом. WCAG 1.4.12 применяется и для расстояния между словами.

Обратите внимание, что в коде не устанавливается высота строки. Это значение нормально наследуется вместе с остальными параметрами шрифта в свойстве

Если обнаружится, что это не так (например, из-за явной установки высоты строки ) можно добавить , чтобы соответствовать WCAG 1.4.12.

Пример

В этом примере демонстрируется применение этого минимального набора стилей.

See this code Простой Select on x.xhtml.ru.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

Часто задаваемые вопросы

Как на одной странице сделать два селекта разного вида

Нужно привязывать оформление селекта относительно своего родителя:

.parent1 .cusel {
/* описываем оформление селекта первого вида */
}
.parent2 .cusel {
/* описываем оформление селекта второго вида */
}

Можно подключить разные фоны, использовать разные цветовые схемы, шрифты и т.п.

Или же можно использовать дополнительный класс:

<select id="select1" name="select1">
...
<select id="select2" name="select2" class="cusel2">
...

.cusel {
/* описываем оформление селекта первого вида */
}
.cusel2 {
/* описываем оформление селекта второго вида */
}

В прозрачной части cuSel виден фон, который находится под ним

Следует делать спрайт более длинным, чтобы непрозрачный фон являлся подложкой селекту, тогда прозрачный участок ляжет сверху на эту подложку и cusel просвечиваться не будет.

Как убрать подсветку select при наведении и получении фокуса (update)

Достаточно убрать из стилей:

/*
	styles for focus and hover
*/
.cusel:hover,
.cusel:hover .cuselFrameRight,
.cusel:focus,
.cusel:focus .cuselFrameRight,
.cuselFocus,
.cuselFocus .cuselFrameRight {
	background-image: url(path-to/selects-focus.png);
}

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

CSS Reference

CSS Properties

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Заключение

Пример стилизованного в разных состояниях с сохранением WCAG-доступности.

See this code Select Menus on x.xhtml.ru.

Когда речь идет о стилизации полей формы, нужно обратить внимание на минимальный набор стилей, который понадобится, чтобы обеспечить соответствие общему дизайну и поддержку состояний, которые перечислены выше. Похожие публикации, посвященные стилизации HTML-элемента : Select Like It’s 2019 и Custom Select Styles with Pure CSS немного отличаются подходами, но заслуживают не меньшего внимания

Может быть эти варианты даже лучше соответствуют вашим целям и требованиям

Похожие публикации, посвященные стилизации HTML-элемента : Select Like It’s 2019 и Custom Select Styles with Pure CSS немного отличаются подходами, но заслуживают не меньшего внимания. Может быть эти варианты даже лучше соответствуют вашим целям и требованиям.