改变输入框尺寸和颜色？

Question

我该如何改变这个框的大小？正如您所看到的，它对于给定的表格来说太大了。

我已经尝试过填充、边框、宽度等等。似乎什么都不起作用 :/

这是这个框

<input type='color'>

- Chola Tech

---

请提供能够在代码片段中重现问题的最少量代码。 - user4447799

请在提问时附上所有相关的代码。 - freginold

Answer 1

结合border，background和padding属性可以消除“添加的空间”。

最主要消除颜色的是background属性。

input {
  border:0;
  background:none;
  padding:0;
}

<input type='color'>

更新:

我找到了-webkit-color-swatch-wrapper和-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'>

- Albzi

---

谢谢。这个完美地运行。我不知道为什么有这么多人对此进行了负投票，当你并不需要代码片段时。 - Chola Tech

@CholaTech 很高兴能帮到你。公平地说，如果问题是可复现的，最好只包含最基本的内容。虽然我理解了你的原始帖子并在其中编辑了代码片段，但不确定为什么其他人会给出负面评价。 - Albzi

不起作用.. 附注：你已经在上面写过了^. @Albzi - Chola Tech

啊，是的，我明白了，对不起 - 我误读了你说的！是的，周围的空白我实际上无法去除，我尝试过，但我能做的最好只是隐藏背景颜色。@CholaTech - Albzi

那导致表格溢出了 :D 真烦人。我就这样吧。还是谢谢你的帮助，@Albzi :) - Chola Tech

Answer 2

你可以给你的输入框添加一个ID，然后使用CSS来改变宽度和高度，像这样。

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

而且CSS就像这样：

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

- user7819783

---

虽然那样做不起作用。它改变了“颜色本身”的大小，但周围的框保持不变。而我想要改变的正是那个框。 - Chola Tech

我的错，当时误解了问题。 - user7819783

@user8719783 我觉得我也误解了问题！谢谢你的回答，正是我所需要的 xD - Joachim