Как изменить цвет svg в input type date?

Question

Подскажите как изменить цвет svg на #9f9f9f?

Если возможно, то без правки самого тега svg внутри background

Неполучается еще никак решить 2 проблемы

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

input[type="date"] {
    border-radius: 2px;
    border: 1px solid #9f9f9f;
  height: 22px;
  display: inline-block;
    background: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="calendar-alt" class="svg-inline--fa fa-calendar-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"></path></svg>') no-repeat;
    background-position: calc(100% - 4px) 40%;
  background-size: 12px;
    -moz-appearance:none;
    -webkit-appearance: none;
    appearance: none;
    padding: 0px 18px 0px 4px;
}
input[type="date"]:not([value=""]) {
  background: none;
    padding: 0px 4px 0px 4px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<input type="date" value="">
<input type="date" value="2021-11-14">

Answer 1

Используя общее свойство background, нужно отдавать себе отчёт, что это действительно необходимо - так как, при таком подходе, теряется гибкость в настройке отдельных параметров и ухудшается читаемость кода. Особенно это касается множественных составных фонов. Поэтому желательно отбросить лень и сразу прописывать "подсвойствами" (например, background-repeat: repeat, no-repeat;).

Задача же решается довольно просто - множественный фон и режимы наложения background-blend-mode. Для наглядности сделал градиентом, а не сплошным цветом:

input[type="date"] {
  border-radius: 2px;
  border: 1px solid #9f9f9f;
  height: 22px;
  display: inline-block;
  
  background-repeat: no-repeat;
  background-blend-mode: screen, normal;
  background-image: linear-gradient(45deg, red, blue), url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="calendar-alt" class="svg-inline--fa fa-calendar-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"></path></svg>');
  
  background-position: calc(100% - 4px) 40%;
  background-size: 12px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0px 18px 0px 4px;
}

input[type="date"]:not([value=""]) {
  background: none;
  padding: 0px 4px 0px 4px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<input type="date" value="">
<input type="date" value="2021-11-14">

Если цвет статичный, то всё таки лучше задать его непосредственно в SVG. К тому же, в данном SVG много лишнего, что всё равно не будет работать, учитывая метод встраивания.

БЛОГ НА HUSL

Как изменить цвет svg в input type date?

Ответы (1 шт):