I want to change the inside color of a css so that it looks like this:

How i want it to look

How it looks so far:

Color i want to change

I've tried many things so that it looks like that, here is my html:

<div className="forms__highlightcolor">
                    <p>Highlight Color</p>
                    <input type="color" id="colorpicker" value="#0000ff"></input>
                </div>

And the CSS i've made so far:

.forms__highlightcolor > input{
    background: #F1F1F1;
    width: 250px;
    height: 35px;
    border: 1px solid #F1F1F1;
    border-radius: 20px;
}




 .forms__highlightcolor > input[type="color"]::-webkit-color-swatch {
    border: none;
    width: 0px;
    border-radius: 4px;
  }

I want to change the inside color, but don't know how to do it.

CodePudding user response：

You must Learn SASS propgraming

CodePudding user response：

Here is my code I hope this may help.

First You need to separate the input section and color has code section and wrap it inside a div.

#colorpicker {
  border: 0;
  padding: 0;
  background: unset;
  width: 30px;
  height: 35px;
  left: -5px;
  position: absolute;
}

#colorpicker:hover {
  cursor: pointer;
}

.color-input-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 57px;
  overflow: hidden;
  width: 200px;
  height: 25px;
  position: relative;
  background: #fdf8f5;
}

.color-input-wrapper:hover {
  cursor: pointer;
} 

.hash-code-section {
  margin-left: 30px;
  display: flex;
  align-items: center;
  flex:1;
  margin-right: 10px;
  text-transform: uppercase;
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  margin-left: auto;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

<div className="forms__highlightcolor">
  <p>Highlight Color</p>
  <div ><input type="color" id="colorpicker" value="#FF5733"></input>
    <div >#FF5733 <i ></i></div>
  </div>
</div>