我的表单有很多颜色输入。我正在使用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;
}
这是到目前为止的样子。输入周围似乎仍然有一个细的灰色边框,但我也无法弄清楚该如何消除。
github
最佳答案
我希望我能正确理解您-您希望这三个按钮是圆形而不是正方形?还是您希望整个div都是正方形?
无论哪种方式,这都是通过控制半径并设置宽度和高度来实现的一种选择:
.form-control {
color: #ffffff;
background-color: inherit;
padding: 0;
border: none;
box-shadow: none;
width: 100%;
height:100%;
border-radius: 50%;
}