I'm doing an edit bar blueprint and I can't get my items to be the same height. The input appears to have some sort of margin which I can't delete. The problem How it looks on inspect

.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;
}

.edit-mode-button {
  background-color: green;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
}

<footer>
  <div class="note-edit-menu">
    <button class="edit-mode-button edit-menu-item">Edit</button>
    <input type="color" class="border-color-input edit-menu-item" value="#000000">
  </div>
</footer>

I'm doing an edit bar blueprint and I can't get my items to be the same height. The input appears to have some sort of margin which I can't delete. The problem How it looks on inspect

.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;
}

.edit-mode-button {
  background-color: green;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
}

<footer>
  <div class="note-edit-menu">
    <button class="edit-mode-button edit-menu-item">Edit</button>
    <input type="color" class="border-color-input edit-menu-item" value="#000000">
  </div>
</footer>

I've tried css reset and that didnt work. It's the same on chrome,opera and edge if that matters.

• html
• css
• color-picker

Share Improve this question Follow edited Nov 19, 2024 at 21:39 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Nov 19, 2024 at 21:37 relextm19relextm19 1111 silver badge11 bronze badge 1

• You can fiddle around with block-size, border-width and background-color which would work on e.g. Chrome/Edge as they currently show the inbuilt color input element, but remember that different browsers have their own styles for this. e.g. I've just looked at your snippet on Safari/IOS and it shows a rounded oblong, not a rectangle. If you want complete control of the look across all browsers you'll have to implement a color input substitute yourself. – A Haworth Commented Nov 19, 2024 at 22:01

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 1

This is due to the browser styling for color inputs. To override it first you can put -webkit-appearance: none; on the input itself and then to override the color picker styles you can target the shadow element with ::-webkit-color-swatch

Note that results will vary between browsers (ie for Firefox you would use ::-moz-color-swatch).

.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;
  -webkit-appearance: none;
  position:relative;
}

.edit-menu-item::-webkit-color-swatch {
  position:absolute;
  top:-1px;
  left:-1px;
  right:-1px;
  bottom:-1px;
}

.edit-mode-button {
  background-color: green;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
}

<footer>
  <div class="note-edit-menu">
    <button class="edit-mode-button edit-menu-item">Edit</button>
    <input type="color" class="border-color-input edit-menu-item" value="#000000">
  </div>
</footer>

By default the browser shows input elements a certain way. It just so happens that the input:color element has some interactive parts and be default includes a bezel around the edge. The browser doesn't give you a good way to override this native styling, but you can easily just use the element in the background.

In my demo I use a psuedo element and some js to change the color of that element. The ::before element is placed using absolute positioning over the color input element. Then js updates the background color of the element to match whatever the color element is changed to. This effectively removes the bezel and lets you have your own style over the native input element.

However, it might be a good idea to check out a UI library that has already built these elements out using accessible and cross browser compatible designs. You could also just add a border to your input:color to make it more clear where the element stands in the layout, without changing the default appearance/interactivity of the element.

const inputElement = document.querySelector("input[type='color']");

inputElement.addEventListener("input", e => {
  inputElement.style.setProperty("--color", e.target.value);
});

* {
  box-sizing: border-box;
}

.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;
}

.edit-mode-button {
  background-color: green;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
}

input[type='color'] {
  --color: #000;
  position: relative;
}

input[type='color']::before {
  content: "";
  background: var(--color);
  position: absolute;
  inset: 0;
}

<footer>
  <div class="note-edit-menu">
    <button class="edit-mode-button edit-menu-item">Edit</button>
    <input type="color" class="border-color-input edit-menu-item" value="#000000">
  </div>
</footer>

You can simply use box-sizing : border-box; -> css box-sizing

.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;  /* <--- */
  }
.edit-mode-button {
  background-color : green;
  color            : white;
  display          : flex;
  justify-content  : center;
  align-items      : center;
  font-weight      : bold;
  cursor           : pointer;
  }

<footer>
  <div class="note-edit-menu">
    <button class="edit-mode-button edit-menu-item">Edit</button>
    <input type="color" class="border-color-input edit-menu-item" value="#000000">
  </div>
</footer>