How to remove styling from

Question

Currently, I have a form with . I want to restyle the color picker; however, I am not sure how to remove the current styles. So far, I have:

#colorPicker{
    border-color: transparent;
    outline: none;
    padding: 0;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

However, when I do this, there a gray border left around the color picker. Also, the color picker box does not become a circle.

user_16436177 · Answer

I think we can't do it directly from css but here is how I did it some time ago.

I used basic Js and CSS variables to implement it.

//Get the colorpicker
let colorPicker = document.getElementById('colorPicker');

// Add an event listener to listen for change in color
colorPicker.addEventListener('input',()=>{
// We cannot edit the pseudo element from js but we can use css variables.
// Change the variable to set the color
colorPicker.style.setProperty('--color',colorPicker.value)
})

#colorPicker {
  padding: 0;
  /* Declare the color variable */
  --color: black;
  /* We will control height and width of input from here. */
  width: 20px;
  height: 20px;
  position: relative;
}

/* Create the pseudo class and add styling */
#colorPicker::before {
  content: '';
  /* Used to center it on top of the input. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* This allows you to click on the main input. */
  pointer-events: none;
  /* Set height and width more than that of input. */
  width: 150%;
  height: 150%;
  /* Implement the background using css varible. */
  background: var(--color);
  /* All the above styles add basic functunality. We can add further styling below. */
  border-radius: 50%;
}

How to remove styling from <input type="color">

1 Answers