Build a Job Application Form - border-color and background-color do not work with radio buttons

HTML-CSS
1

Tell us what’s happening:

My code passes the test, but does not style the radio buttons as expected. Color does not change at all (in Brave and Firefox on Linux).

.radio-group input[type=“radio”]:checked {
border-color: orange;
background-color: orange;
}

Google says that this is a known issue with standard system radio buttons. This however works:

.radio-group input[type=“radio”]:checked {
accent-color: orange;
}

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Application Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <form>
      <label for="name">Full name: </label>
      <input type="text" id="name" name="name" placeholder="Enter your name" required>
      <label for="email">Email: </label>
      <input type="email" id="email" name="email" placeholder="Enter your email" required>
      <label for="position">Position: </label>
      <select id="position" name="position" required>
        <option value="" selected disabled hidden>Select a position</option>
        <option value="1">Developer</option>
        <option value="2">Designer</option>
        <option value="3">Manager</option>
      </select>
      <fieldset class="radio-group">
        <legend>Availability</legend>
        <input type="radio" name="availability" id="full-time" checked>
        <label for="full-time">Full-Time</label>
        <input type="radio" name="availability" id="part-time">
        <label for="part-time">Part-Time</label>
      </fieldset>
      <label for="message">Why do you want this job?</label>
      <textarea id="message" name="message" placeholder="Write your motivation" required></textarea>
      <button type="submit">Submit</button>
    </form>
  </div>
</body>
</html>

/* file: styles.css */
input, select, textarea {
  border-width: 3px;
}
input:focus, textarea:focus {
  border-color: yellow;
  border-width: 5px;
 }
input:invalid, select:invalid, textarea:invalid {
  border-color: red;
}

input:valid, select:valid, textarea:valid {
  border-color: green;
}
button:hover {
  background-color: hotpink;
}
.radio-group input[type="radio"]:checked {
  border-color: orange;
  background-color: orange;
  /* border-color and background-color do not work with standard
  system radio buttons - accent-color does, or using appearance
  none and making a custom radio button from scratch */
  accent-color: orange;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/60.5 Safari/605.1.15

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

I think you are missing an appearance: none before being able to make color changes

3

Yes, that is what I found using Google. But it was not obvious from the lesson at all. It is possible to pass the test without making any visible change to the radio buttons. It probably needs more explanation.

4

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.

5

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