时间戳

首页 > 解决方案 > 如何使用输入设置按钮样式

html - 如何使用输入设置按钮样式

问题描述

我正在尝试将按钮文本对齐到中心，但它没有向上移动。它位于稍下方。我希望它与输入类型颜色一起放置在中心。

button{
  outline: none;
  background: #cccccc;
  border: none;
  border: 2px solid #efefef;
  padding: .6rem 1rem;
  margin-left: 1rem;
  border-radius: 3px;
  font-weight: 600;
}

input[type="color"] {
  -webkit-appearance: none;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}
<button class="strokecolor">Choose a color
  <input type="color" value='#1a1a1a'>
</button>

<!--Choose a color text is not getting to the center of the button

标签： htmlcssbuttoninputcolors

解决方案

button{
  display:flex;
  align-items:center;
  outline: none;
  background: #cccccc;
  border: none;
  border: 2px solid #efefef;
  padding: .6rem 1rem;
  margin-left: 1rem;
  border-radius: 3px;
  font-weight: 600;
}

input[type="color"] {
  -webkit-appearance: none;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}
<button class="strokecolor">Choose a color
  <input type="color" value='#1a1a1a'>
</button>

<!--Choose a color text is not geeting to the center of the button

推荐阅读