How to change a background color in radio/checkbox buttons?

Hello,
Fsr I spent a lot of time today trying to make 2 things:

  1. change a color of radio/buttons in general (like as you see them when you open a webpage)
  2. change a color of radio/buttons if you select them

I have been making all of this while coding Build a Survey Form in (New) Responsive Web Design Certificate. I know, stupid, but anyway…

This is what I understood (not necessarily correct):

  • you don’t have to code it in CSS, there is Javascript for it, but I have no life and I want it in CSS
  • in CSS there are multiple choices, but none of them work properly
  • filter: grayscale(1); works perfectly, but not for all colors
  • appearance: none; you have to create your buttons individually, but fsr my height cannot be opperatable - if you select small width of buttons (e.g. 5px), you cannot select small height neither (the height will be fixed). I know this sound weird, but I can change it from 30px. Under this number it won’t change .
  • box-shadow property; this works fine, but there is a problem as with appearence - from some point you cannot set small height as your width
  • filter: hue-rotate(); works perfectly, the function changes colors of buttons after selecting them (my closest choice)

Here is my code, I don’t know if I can just sent a link to my project or not, because it’s not in codepen:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" conent="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"/>
</head>

<body>
  <h1 id="title">School Survey Form</h1>
  <p id="description">Please, fill all the empty boxes bellow to help us improve our school.</p>
  <form id="survey-form">
    <fieldset>
      <label id="name-label">Full name: <input id="name" name="name" type="text" placeholder="Enter your name..." required /></label>
      <label id="email-label">Email: <input id="email" name="email" type="email" placeholder="Enter your email..." required /></label>
      <label id="number-label">Age: <input id="number" name="number" type="number" min="6" max="120" placeholder="Enter your age..." required /></label>
    </fieldset>

    <fieldset>
      <label for="radio-label"><input type="radio" value="radio" name="radio-button" class="inline" required />I am a student</label>
      <label for="radio-label"><input type="radio" value="radio" name="radio-button" class="inline" required />I am a teacher</label>
      <label for="radio-label"><input type="radio" value="radio" name="radio-button" class="inline" required />I am a parent</label>
    </fieldset>

    <fieldset>
      <p class="headings">What would you like to improve in our school?</p>
      <label for="checkbox-label"><input type="checkbox" value="checkbox" name="checkbox-button" class="inline" required /> more complex curriculum</label>
      <label for="checkbox-label"><input type="checkbox" value="checkbox" name="checkbox-button" class="inline" required /> better facilities and tools</label>
      <label for="checkbox-label"><input type="checkbox" value="checkbox" name="checkbox-button" class="inline" required /> improvements in teaching</label>
      <label for="checkbox-label"><input type="checkbox" value="checkbox" name="checkbox-button" class="inline" required /> create more "chill zones" for student</label>
      <label for="checkbox-label"><input type="checkbox" value="checkbox" name="checkbox-button" class="inline" required /> build / renovate specialist rooms (e.g. chemical laboratory, physical classroom,...)</label>
    </fieldset>
    <fieldset>
      <label for="dropdown"> Where did you find this survey form?
        <select id="dropdown" name="dropdown">
          <option value="">(select one)</option>
          <option value="1">Instagram</option>
          <option value="2">Facebook</option>
          <option value="3">The teachers</option>
          <option value="4">A friend</option>
          <option value="5">A family member</option>
        </select>
      </label>
      <label for="textarea"> Any other questions or comments?
        <textarea id="textarea" name="textarea" rows="5" cols="30" placeholder="Please enter additional comments bellow..."></textarea>
      </label>
    </fieldset>
    <input id="submit" type="submit" value="Submit" />
  </form>
</body>

</html>
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  font-size: 16px;
  font-family: 'Oswald', sans-serif;
  text-align: center;
  background: #C9D479;
  color: white;
}

h1, p {
  margin: 1em auto;
}

.headings {
  text-align: left;
}

form {
  width: 60vw;
  min-width: 300px;
  max-width: 500px;
  margin: 0 auto;
}

fieldset {
  border: none;
  padding: 2em 0;
  border-bottom: 3px solid black;
}

fieldset:last-of-type {
  border: none;
}

label {
  display: block;
  margin: 0.5em 0;
  text-align: left;
}

input,
select,
textarea {
  width: 100%;
  margin: 10px 0 0 0;
  min-height: 2.5em;
}

input, 
select,
textarea {
  background: #13762D;
  color: white;
}

.inline {
  width: unset;
  vertical-align: middle;
  margin: 0 1em 0 0;
}

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  color: white;
}

input[type="radio"] {
  filter: hue-rotate(-100deg);
}

input[type="checkbox"] {
  filter: hue-rotate(-100deg);
}

::placeholder {
  color: white; 
}

If there is any smart person, I would appreciate your help :smile:

Not sure I understand what you mean by the height comment. You have min-height for all input elements so that will affect the radio buttons as well.

Using appearance: none is the normal way of doing it.

1 Like

Oh right. I thought it would be min-height of input elements, but I was depressed after all the information given to me haha. I used apearance: none and it works perfectly (even in freecodecamp.org code editor). Your link helped a lot as well. Thanks! :smile:

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