CODEWITHSUNDEEP
htmlcss
Chola Tech
Chola Tech

Reputation: 101

Change input color box size?

How do I change the size of this box? As you can see it is way too big for the given table.

I've tried with padding, borders, width ... etc. Nothing seems to work :/

This is the box

<input type='color'>

Upvotes: 3

Views: 2184

Answers (2)

Albzi
Albzi

Reputation: 15609

Combining border, background, and padding properties will get rid of the 'added space'.

The main one that gets rid of the colour is background.

input {
  border:0;
  background:none;
  padding:0;
}
<input type='color'>

Updated:

I have found -webkit-color-swatch-wrapper and -webkit-color-swatch

input{
    margin:0;
    padding:0;
    border:0;
}
input::-webkit-color-swatch-wrapper {
	padding: 0;
    margin:0;
    background:none;
}
input::-webkit-color-swatch {
	border: none;
}
<input type='color'>

Upvotes: 5

user7819783
user7819783

Reputation:

You could give your input an ID, and change width and height with css like this.

<input type='color' id="myColor">

and the css like this,

#myColor {
width: 100px;
height: 20px; }

Upvotes: 0

Related Questions