如何使用输入样式按钮

Question

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

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

Answer 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

Answer 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

如何使用输入样式按钮

How to style button with input

html

css

input

colors

button