В стилях я хочу заменить стандартный значок на собственный значок svg. Возможно ли через css/js?
Я попытался добавить фоновое изображение, но старый прямоугольник не исчезает
HTML:
<input type = "color" id = "color-input" value = "#563d7c" title = "Choose your color">
CSS:
#color-input {
background-image: url("https://www.svgrepo.com/show/439108/color-theory.svg");
height: 35px;
width: 35px;
background-size: cover;
}
Попробовал добавить прокладку, и это работает! CSS сейчас:
#color-input {
background-image: url("https://www.svgrepo.com/show/439108/color-theory.svg");
height: 35px;
width: 35px;
background-size: cover;
padding: 20px;
}
(значок стандартного цвета не исчезает без заполнения. Тем не менее, если у вас есть более разумное решение, я хочу это увидеть. Спасибо вам всем. Я сделал это благодаря всем вам!
Предоставьте достаточно кода, чтобы другие могли лучше понять или воспроизвести проблему.
Не могли бы вы опубликовать свой код? В противном случае, если вы пытаетесь вставить значок svg, вы можете сделать что-то вроде этого:
<svg width = "100" height = "100">
<circle cx = "50" cy = "50" r = "40" stroke = "green" stroke-width = "4" fill = "yellow" />
</svg>
Кроме того, сделать это таким образом проще, чем через стили. Есть ли особая причина, по которой вы хотите сделать это в стилях? Другой вариант — преобразовать svg в png и использовать его в качестве фонового изображения. Для этого вы можете использовать следующую страницу: https://svgtopng.com/
Он работает с отступами в css
#color-input {
background-image: url("https://www.svgrepo.com/show/439108/color-theory.svg");
height: 35px;
width: 35px;
background-size: cover;
padding: 20px;
}
Вы можете использовать Label
для ввода и поместить свой svg как <img>
в HTML. Посмотрите фрагмент ниже:
input[type=color] {
position: absolute;
width: 0;
height: 0;
visibility: hidden;
z-index: -1;
}
label {
cursor: pointer;
}
<div id = "color-picker">
<input type = "color" id = "color-input" value = "#563d7c" title = "Choose your color">
<label class = "color-select" for = "color-input"><img width = "42px" height = "42px" src = "https://www.svgrepo.com/show/439108/color-theory.svg"></label>
</div>
Какой значок вы имеете в виду? Вы можете настроить это различными способами, например удалить границу и отступы, изменить ширину и высоту, цвет фона и т. д. Я не знаю значка, связанного с цветом типа ввода, или для чего будет использоваться значок SVG. .