Question 211112 in Html Question posted in
Some basic documentation can be found here.

Html – Why does input[type=color] interfere with the position of text line?

Here is an example, this demo shows that text line is at wrong position. Why?

demo: https://codepen.io/ahuigo/pen/yLQjxew?editors=1010

<div class="main">
  <b style="border: 1px solid;">text line</b>
  <input type="color" value="#0000ff">
</div>

<style>
.main{
    border: 1px solid red;
    box-sizing: border-box;
}
input{
  height: 22px;
}

input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  padding: 0;
  border-radius: 2px;
}

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

</style>
Tags:

2

Answers


  1. 0

    It’s the padding: 0 on the color input, not the fact that it’s a color input. You can fix it by making main a flex container, or using one of the other methods on How to center in CSS.

    Also, // foo isn’t a comment in CSS, you have to use /* foo */.

    Login or Signup to reply.
  2. 0

    I am not sure if I understood your problem correctly but do you search for this solution?

    .line {
  border: 1px solid red;
  display: flex;
  gap: 10px;
}

input {
  border: none;
  border-radius: 5px;
  overflow: hidden;
  height: auto;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  margin: 0;
}
    <div class="line">
  <b>text line</b>
  <input type="color">
</div>

    make a parent div to put both in a flexbox. With gap you can set the spacing between the text and the input, would be cleaner than using margin-left or something like that…

    Btw to get the input border-radius working you need to set overflow: hidden.

    Hope it helps! 🙂

    And yes, // foo isn’t a comment in CSS, you have to use /* foo */. (Credits Zac Anger)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search