我的表单有很多颜色输入。我正在使用boostrap,并且默认的颜色输入外观很糟糕,因此我一直在上面添加我自己的CSS来清理它。我摆脱了白色的大边框,但现在我希望将其显示为圆形而不是正方形。我希望它是一个没有边界的扁平圆形,甚至可能带有一点阴影,以呈现出具有设计感的外观。

这是我的颜色输入之一:

<div class="col-xs-1 menu-title-color-div color-input-div">
  <input type="color" id="menu-title-color-input"
         class="form-control menu-data color-input menu-title-color-input"
         name="MenuTitleColor">
</div>


和我用来获得外观的CSS。 (当我弄清楚如何将它们显示为圆圈时,我将将此CSS移至更特定的CSS选择器)

.form-control {
  color: #ffffff;
  background-color: inherit;
  padding: 0;
  border: none;
  box-shadow: none;
}


这是到目前为止的样子。输入周围似乎仍然有一个细的灰色边框,但我也无法弄清楚该如何消除。

html - 如何将类型=“颜色”的输入显示为圆圈?-LMLPHP

github

最佳答案

我希望我能正确理解您-您希望这三个按钮是圆形而不是正方形?还是您希望整个div都是正方形?

无论哪种方式,这都是通过控制半径并设置宽度和高度来实现的一种选择:

.form-control {
  color: #ffffff;
  background-color: inherit;
  padding: 0;
  border: none;
  box-shadow: none;
width: 100%;
height:100%;
border-radius: 50%;
}

09-25 12:10
查看更多