如何使用输入设置按钮样式答案

【问题标题】：How to style button with input如何使用输入设置按钮样式
【发布时间】：2021-10-13 02:40:08
【问题描述】：

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

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

【问题讨论】：

标签： html css button input colors

【解决方案1】：

将按钮设置为display: flex并使用align-items: center

button{
  display: flex; /* This is new */
  align-items: center; /* This is new */
  outline: none;
  background: #cccccc;
  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;
  margin-left: 5px; /* This is new */
  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

【讨论】：

【解决方案2】：

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

【讨论】：