Styling an Input type

HTML-CSS
1

I am trying to style my input checkbox type in css, but the results is not showing…(I tried to scan for any mistakes I did, but they are saying the code is right)
please help…
code:

input[type=checkbox] {
    padding-left:5px;
    padding-right:5px;
    border-radius:15px;
  color: red;

Link to the codepen if u need it: https://codepen.io/nianaz/pen/KKmboKO?editors=1100
sorry for any grammar mistakes

2

Hey so styling input elements can be a little difficult to wrap your head around. The important things to always remind yourself are:

  1. input elements are not the label, but the things that user can interact with. (e.g. for checkbox, the box that user can click is the input element, not the description label)
  2. inputs are by default inline, meaning properties like margin and padding will work differently.
  3. often to have a custom input, you have to start from scratch by removing the default input appearance first.

You have selected your checkboxes correctly, but color doesn’t apply since checkboxs don’t have texts.
Border-radius won’t apply until you start with a completely new, custom checkbox.
Padding is the space inside of the checkbox, and therefore you need to start with a completely new, custom checkbox to see that take effect as well.

I have written a simple codepen here for you to look at.

1 Like
3

As @MatchaCrisp mentioned, styling inputs can be tricky and you often need to undo the default styles the browser puts on them. Also, don’t forget that you have a vast searchable network of docs out there to learn from. Try googling “css styling checkbox”. Here’s an interesting one that came back in the results:

Complete guide on how to style checkbox element with css

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.