如何统一color类型input与按钮的高度？样式设置无效求助

问题根源在于<input type="color">自带浏览器默认样式（比如内边距、边框），且默认box-sizing为content-box——你设置的height:2rem不会包含这些额外样式，最终导致它的实际高度超出按钮，再加上align-items:center的布局，视觉上就显得高度不统一。

直接修改CSS即可解决：

.note-edit-menu {
  border: 2px solid black;
  width: 100%;
  padding: 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.edit-menu-item {
  width: 5rem;
  height: 2rem;
  /* 关键：让高度计算包含边框和内边距 */
  box-sizing: border-box;
  /* 统一重置默认内边距与边框 */
  padding: 0;
  border: none;
}

.edit-mode-button {
  background-color: green;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
  /* 给按钮补回边框，保持视觉一致性（可选） */
  border: 1px solid transparent;
}

/* 针对Color Input的特殊重置，消除浏览器默认样式干扰 */
.border-color-input {
  appearance: none;
  cursor: pointer;
}
/* 适配Chrome系浏览器的颜色选择器内部样式 */
.border-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}
.border-color-input::-webkit-color-swatch {
  border: none;
}

修改后，按钮与color input会保持完全一致的高度，同时保留各自的功能。如果需要保留边框样式，可调整.edit-menu-item的border属性，确保两者样式统一。

内容的提问来源于stack exchange，提问作者relextm19