Styling Input Type Color | Pure CSS Tutorial

30th September 2021

35382

Welcome to today’s tutorial. In today’s tutorial, we will learn how to style input type color. Today, we will be looking into customizing the color input with two different styles. Styling color input isn’t as straightforward as applying background-color and adding borders. It’s much more complicated. But in this tutorial, we will customize the color input with small steps.

So let us begin the tutorial. For this tutorial, we will be using HTML and CSS.

Video Tutorial:

If you would like to code along with me, I have a video version of this tutorial. You can check it down below. Also, I post new tutorials on my youtube channel every alternate day. Be sure to subscribe so you don’t miss them.

Project Folder Structure:

Let us take a look at the project folder structure. The project folder is called – Styling Color Input. Inside this folder, we have two files – index.html and style.css. The first file is an HTML document while the second one is the stylesheet.

HTML:

We begin with coding the HTML first. Do copy the code below and paste it into your HTML file.

The HTML consists of two container divs. Inside each of these containers, we have an input type color and a label. The id of the first input tag is style1 while the id of the second is style2.

We link these labels to their respective inputs by setting the for attribute of the label to the id of the input.

Also, we set a default color for each of the color input by setting a hex color code as the value attribute.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Styling Input Color</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <input type="color" value="#43da86" id="style1" />
      <label for="style1">Style 1</label>
    </div>
    <div class="container">
      <input type="color" value="#ffb721" id="style2" />
      <label for="style2">Style 2</label>
    </div>
  </body>
</html>

CSS:

Let us now style these inputs using CSS. Now, copy the code provided below and paste it into your stylesheet.

We begin by doing a CSS reset which removes unwanted paddings and margins from all the elements. It also sets the box-sizing of all the elements to the border-box.

Next, we set the display of body to flex and contents inside the body are placed with space around them horizontally using justify-content. We also centre them vertically using align-items.

Now coming to the container. Even for the container, the display is set to flex. The default value of flex-direction is row. Here we set it to the column. The reason we do it is that we want the input and label to be one below the other.

Other Tutorials You Might Like:

For style1, we set the appearance property to none. This will hide the default appearance of the input. Now we can style it as per our choice. We set the width and height both to 100px. Next, we set the background colour to transparent. Also, we set the border to none.
Up to this step, the styling of style2 is exactly the same.

We selected the chosen color using the ::-webkit-color-swatch pseudo-element. The border-radius of the color swatch is set to 15px and the borders are removed.

Similarly, we select the color swatch of the style2 and set the border-radius to 50% to shape it into a circle. Also to make it look even better we add a thick black border around it.

That’s it for this tutorial. These were the two ways you can style your color input to suit your need.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
label {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  cursor: pointer;
}

/*------ Style 1 ------*/
#style1 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100px;
  height: 100px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
#style1::-webkit-color-swatch {
  border-radius: 15px;
  border: none;
}
#style1::-moz-color-swatch {
  border-radius: 15px;
  border: none;
}

/*------ Style 2 ------*/
#style2 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  width: 100px;
  height: 100px;
  border: none;
  cursor: pointer;
}
#style2::-webkit-color-swatch {
  border-radius: 50%;
  border: 7px solid #000000;
}
#style2::-moz-color-swatch {
  border-radius: 50%;
  border: 7px solid #000000;
}

If you have any issues while creating this, you can download the source code provided below by clicking on the download code button. Also, I would love to hear your suggestions and feedback so please comment on them below.

Download Code