Как изменить цвет значка в и элементы с использованием CSS? ⇐ Html

[Anonymous]

I’m trying to customize the default icons of and elements using CSS.
For the date input, I want to replace the native calendar icon with my own SVG icon and change its color.
For the select element, I also replaced the default dropdown arrow with a custom SVG, but I want to control its color dynamically via Css. < /P>
Вот код, который я имею до сих пор (упрощенное): < /p>


input[type='date'] {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNSI+PGcgZmlsbD0ibm9uZSIgY2xhc3M9Im5jLWljb24td3JhcHBlciI+PHBhdGggZD0iTTE5LjUgMy42ODE2NEgxOEMxOCAyLjg1NDY0IDE3LjMyNyAyLjE4MTY0IDE2LjUgMi4xODE2NEMxNS42NzMgMi4xODE2NCAxNSAyLjg1NDY0IDE1IDMuNjgxNjRIOUM5IDIuODU0NjQgOC4zMjcgMi4xODE2NCA3LjUgMi4xODE2NEM2LjY3MyAyLjE4MTY0IDYgMi44NTQ2NCA2IDMuNjgxNjRINC41QzMuMTIxNSAzLjY4MTY0IDIgNC44MDMxNCAyIDYuMTgxNjRWMjAuNjgxNkMyIDIyLjA2MDEgMy4xMjE1IDIzLjE4MTYgNC41IDIzLjE4MTZIMTkuNUMyMC44Nzg1IDIzLjE4MTYgMjIgMjIuMDYwMSAyMiAyMC42ODE2VjYuMTgxNjRDMjIgNC44MDMxNCAyMC44Nzg1IDMuNjgxNjQgMTkuNSAzLjY4MTY0Wk0xNiAzLjY4MTY0QzE2IDMuNDA2MTQgMTYuMjI0IDMuMTgxNjQgMTYuNSAzLjE4MTY0QzE2Ljc3NiAzLjE4MTY0IDE3IDMuNDA2MTQgMTcgMy42ODE2NFY0LjY4MTY0QzE3IDQuOTU3MTQgMTYuNzc2IDUuMTgxNjQgMTYuNSA1LjE4MTY0QzE2LjIyNCA1LjE4MTY0IDE2IDQuOTU3MTQgMTYgNC42ODE2NFYzLjY4MTY0Wk03IDMuNjgxNjRDNyAzLjQwNjE0IDcuMjI0IDMuMTgxNjQgNy41IDMuMTgxNjRDNy43NzYgMy4xODE2NCA4IDMuNDA2MTQgOCAzLjY4MTY0VjQuNjgxNjRDOCA0Ljk1NzE0IDcuNzc2IDUuMTgxNjQgNy41IDUuMTgxNjRDNy4yMjQgNS4xODE2NCA3IDQuOTU3MTQgNyA0LjY4MTY0VjMuNjgxNjRaTTMgNi4xODE2NEMzIDUuMzU0NjQgMy42NzMgNC42ODE2NCA0LjUgNC42ODE2NEg2QzYgNS41MDg2NCA2LjY3MyA2LjE4MTY0IDcuNSA2LjE4MTY0QzguMzI3IDYuMTgxNjQgOSA1LjUwODY0IDkgNC42ODE2NEgxNUMxNSA1LjUwODY0IDE1LjY3MyA2LjE4MTY0IDE2LjUgNi4xODE2NEMxNy4zMjcgNi4xODE2NCAxOCA1LjUwODY0IDE4IDQuNjgxNjRIMTkuNUMyMC4zMjcgNC42ODE2NCAyMSA1LjM1NDY0IDIxIDYuMTgxNjRWOC4xODE2NEgzVjYuMTgxNjRaTTIxIDIwLjY4MTZDMjEgMjEuNTA4NiAyMC4zMjcgMjIuMTgxNiAxOS41IDIyLjE4MTZINC41QzMuNjczIDIyLjE4MTYgMyAyMS41MDg2IDMgMjAuNjgxNlY5LjE4MTY0SDIxVjIwLjY4MTZaIiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBkPSJNNiAxNC42ODE2SDcuNUM4LjA1MTUgMTQuNjgxNiA4LjUgMTQuMjMzMSA4LjUgMTMuNjgxNlYxMi4xODE2QzguNSAxMS42MzAxIDguMDUxNSAxMS4xODE2IDcuNSAxMS4xODE2SDZDNS40NDg1IDExLjE4MTYgNSAxMS42MzAxIDUgMTIuMTgxNlYxMy42ODE2QzUgMTQuMjMzMSA1LjQ0ODUgMTQuNjgxNiA2IDE0LjY4MTZaTTYgMTIuMTgxNkg3LjVMNy41MDEgMTMuNjgxNkg2VjEyLjE4MTZaIiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBkPSJNMTEuMjUgMTQuNjgxNkgxMi43NUMxMy4zMDE1IDE0LjY4MTYgMTMuNzUgMTQuMjMzMSAxMy43NSAxMy42ODE2VjEyLjE4MTZDMTMuNzUgMTEuNjMwMSAxMy4zMDE1IDExLjE4MTYgMTIuNzUgMTEuMTgxNkgxMS4yNUMxMC42OTg1IDExLjE4MTYgMTAuMjUgMTEuNjMwMSAxMC4yNSAxMi4xODE2VjEzLjY4MTZDMTAuMjUgMTQuMjMzMSAxMC42OTg1IDE0LjY4MTYgMTEuMjUgMTQuNjgxNlpNMTEuMjUgMTIuMTgxNkgxMi43NUwxMi43NTEgMTMuNjgxNkgxMS4yNVYxMi4xODE2WiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg+PHBhdGggZD0iTTE2LjUgMTQuNjgxNkgxOEMxOC41NTE1IDE0LjY4MTYgMTkgMTQuMjMzMSAxOSAxMy42ODE2VjEyLjE4MTZDMTkgMTEuNjMwMSAxOC41NTE1IDExLjE4MTYgMTggMTEuMTgxNkgxNi41QzE1Ljk0ODUgMTEuMTgxNiAxNS41IDExLjYzMDEgMTUuNSAxMi4xODE2VjEzLjY4MTZDMTUuNSAxNC4yMzMxIDE1Ljk0ODUgMTQuNjgxNiAxNi41IDE0LjY4MTZaTTE2LjUgMTIuMTgxNkgxOEwxOC4wMDEgMTMuNjgxNkgxNi41VjEyLjE4MTZaIiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBkPSJNNiAyMC4xODE2SDcuNUM4LjA1MTUgMjAuMTgxNiA4LjUgMTkuNzMzMSA4LjUgMTkuMTgxNlYxNy42ODE2QzguNSAxNy4xMzAxIDguMDUxNSAxNi42ODE2IDcuNSAxNi42ODE2SDZDNS40NDg1IDE2LjY4MTYgNSAxNy4xMzAxIDUgMTcuNjgxNlYxOS4xODE2QzUgMTkuNzMzMSA1LjQ0ODUgMjAuMTgxNiA2IDIwLjE4MTZaTTYgMTcuNjgxNkg3LjVMNy41MDEgMTkuMTgxNkg2VjE3LjY4MTZaIiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBkPSJNMTEuMjUgMjAuMTgxNkgxMi43NUMxMy4zMDE1IDIwLjE4MTYgMTMuNzUgMTkuNzMzMSAxMy43NSAxOS4xODE2VjE3LjY4MTZDMTMuNzUgMTcuMTMwMSAxMy4zMDE1IDE2LjY4MTYgMTIuNzUgMTYuNjgxNkgxMS4yNUMxMC42OTg1IDE2LjY4MTYgMTAuMjUgMTcuMTMwMSAxMC4yNSAxNy42ODE2VjE5LjE4MTZDMTAuMjUgMTkuNzMzMSAxMC42OTg1IDIwLjE4MTYgMTEuMjUgMjAuMTgxNlpNMTEuMjUgMTcuNjgxNkgxMi43NUwxMi43NTEgMTkuMTgxNkgxMS4yNVYxNy42ODE2WiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg+PHBhdGggZD0iTTE2LjUgMjAuMTgxNkgxOEMxOC41NTE1IDIwLjE4MTYgMTkgMTkuNzMzMSAxOSAxOS4xODE2VjE3LjY4MTZDMTkgMTcuMTMwMSAxOC41NTE1IDE2LjY4MTYgMTggMTYuNjgxNkgxNi41QzE1Ljk0ODUgMTYuNjgxNiAxNS41IDE3LjEzMDEgMTUuNSAxNy42ODE2VjE5LjE4MTZDMTUuNSAxOS43MzMxIDE1Ljk0ODUgMjAuMTgxNiAxNi41IDIwLjE4MTZaTTE2LjUgMTcuNjgxNkgxOEwxOC4wMDEgMTkuMTgxNkgxNi41VjE3LjY4MTZaIiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48L2c+PC9zdmc+);
background-position: calc(100% - 0px) center;
background-repeat: no-repeat;
background-size: 24px;
position: relative;
margin-bottom: 30px;
}

input[type='date']::-webkit-calendar-picker-indicator {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}

select {
-webkit-appearance: none;
-moz-appearance: textfield;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M12 13.171l4.95-4.95 1.415 1.415L12 16 5.637 9.636 7.05 8.222l4.95 4.95z' fill='%23555555'/%3E%3C/g%3E%3C/svg%3E");
background-position: calc(100%) center;
background-repeat: no-repeat;
background-size: 21px;
}

input, select {
border: none;
border-bottom: 1px solid #E0E0E0;
border-radius: 0;
padding: 10px 0 8px 0;
width: 100%;
}< /code>

Код: Выделить всё

Type of services*
Aesthetic Dentistry
Ortheodontics
Implantology
Surgical dentistr
Whitening
Preventive Dentistry
Pediatric Dentistry
Dental Surgery
Dental Implants
Teeth Whitening
Therapeutic Dentistry

Подробнее здесь: https://stackoverflow.com/questions/797 ... t-elements