Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
571 views
in Technique[技术] by (71.8m points)

css - How to style color type input

I'm working on a project that requires a color input within a form. The default color input displays as a short, wide rectangle with what appears to be a grey outline. The grey outline is actually a background color, and attempting to apply a border and border radius to style the actual color swatch as a circle results in a smaller circular border that lies beneath the rectangular color swatch.

Styling the width and height in CSS allows me control over the rectangular color swatch. Styling the padding and background color allows me to control the "border". I can't work out how to adjust the way the "swatch" displays, or if it is even possible.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I was able to achieve the desired effect by styling the color input's id as follows:

#colorPicker {
  background-color: #F5FF55;
  width: 150px;
  height: 50px;
  border-radius: 5px;
  padding: 5px;
}

I still can't seem to change the shape of the color input swatch. Not sure if this is possible.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
...