6

Подскажите пожалуйста как убрать рамку у данного input?

<input style="width: 50px; height: 50px; border: 1px solid #e0e0e0;" type="color">

3 ответа 3

3

Чуть внимательнее смотрим в инспекторах:

/* Этого хватает для FF */
input[type="color"] {
  padding: 0;
}
/* Для Chrome немного сложнее ;-) */
input[type="color" i]::-webkit-color-swatch-wrapper {
  padding: 0;
}
<input style="width: 50px; height: 50px; border: 0px solid #e0e0e0;" type="color">

2
  • 1
    Спасибо большое, вы это сделали) 21 ноя 2018 в 20:04
  • @ВладиславСамохин а я что? Я ничего, это всё ребята. Просто торопятся с ответами зачем-то.
    – UModeL
    21 ноя 2018 в 21:12
1

input {
  width: 50px;
  height: 50px;
  border: none;
  padding: 0;
}
<input type="color">

3
  • Все равно же осталась серая 19 ноя 2018 в 20:25
  • @ВладиславСамохин, хм.. да. Но ничего лучше, чем запихать его в контейнер, теперь в голову не приходит...
    – Qwertiy
    19 ноя 2018 в 20:30
  • Что вы имеете ввиду? 19 ноя 2018 в 20:31
1

::-moz-color-swatch

input {
    border: 0 !important;
    outline: none !important;
}

::-webkit-color-swatch {
    border: 0;
}

::-moz-color-swatch {
    border: 0;
}
<input type="color">

13
  • Серая рамка как была так и осталась. 19 ноя 2018 в 20:51
  • @ВладиславСамохин Может вы под рамкой подразумеваете outline - ободку при фокусе когда курсор в поле? 19 ноя 2018 в 20:51
  • Залейте полный код в какую-нибудь песочницу, такое ощущение по скрину что другие стили наследуются 19 ноя 2018 в 20:54
  • @ВладиславСамохин jsfiddle.net/fomcpgn9 все работает в Chrome Version 70.0.3538.102 19 ноя 2018 в 20:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.