Как настроить<input type="color">?

В стилях я хочу заменить стандартный значок на собственный значок 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. .

denmch 07.02.2023 02:32

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

Community 07.02.2023 08:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
79
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Не могли бы вы опубликовать свой код? В противном случае, если вы пытаетесь вставить значок 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>

Другие вопросы по теме