Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Having trouble with Part 16: Use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.
My current code is coloring the labels after the checkbox and not the labels it should be coloring which are before the checkbox. Any hints here would be appreciated.

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Job Application Form</title>
</head>
<body>
<div class="container">
    <form>
        <h1>BOO! 👻 Did I scare you? I'm a job application!</h1>
        <fieldset>
        <label for="name">Full Name: </label>
        <input 
            type="text"
            id="name"
            name="name"
            required
        />
        </fieldset>
        <fieldset>
        <label for="email">Email: </label>
        <input 
            type="email"
            id="email"
            name="email"
            required
        />
        </fieldset>
        <fieldset>
        <label for="position">Seeking Arrangement: </label>
        <select 
        id="position"   
        name="position"
        >
            <option value="please">Which way modern man?</option>
            <option value="jester">Jester</option>
            <option value="influencer">Influencer</option>
            <option value="sellout">Sell-Out</option>
            <option value="finance-bro">Finance Bro</option>
            <option value="neet">Neet</option>
        </select>
        </fieldset>
        <fieldset class="radio-group" name="availability">
            <legend class="bottom-label">Current Arrangement:</legend>
            <label for="wage-slave">Wage Slave</label>
            <input 
            type="radio"
            id="wage-slave"
            value="wage-slave"
            name="availability"
            class="radio-group"
            />
            <label for="ceo">CEO</label>
            <input 
            type="radio"
            id="ceo"
            value="ceo"
            name="availability"
            class="radio-group"
            />
            <label for="unemployed">Unemployed</label>
            <input 
            type="radio"
            id="unemployed"
            value="unemployed"
            name="availability"
            class="radio-group"
            />
            <label for="go-getter">Go-getter</label>
            <input 
            type="radio"
            id="go-getter"
            value="go-getter"
            name="availability"
            class="radio-group"
            />
        </fieldset>
        <fieldset>
        <legend class="bottom-label">Greivances:</legend>
        <textarea id="message"></textarea>
        </fieldset>
        <button 
        type="submit"
        >Submit</button>
    </form>
</body>
</html><!-- file: index.html -->


body {
  color: #183216;
  text-align: left;
  font-family: tahoma;
  font-size: 1.3rem;
}
.container {
  max-width: 600px;
  margin: 50px;
  padding: 20px;
  background-color: whitesmoke;
  border-radius: 5px;
  border-width: 6px;
}

input:not(.radio-group) {
  padding: 3px;
  margin: 8px 0;
  border-radius: 4px;
  border: ridge lightgreen;
  width: 90%
}
h1 {
  color: #183216;
  text-align: center;
  font-size: 1.7rem;
}
select {
  padding: 3px;
  margin: 8px 0;
  border-radius: 4px;
  border: 2px ridge lightgreen;
  width: 92%;
}
.position {
  text-align: center;
  font-size: 0.9rem;
  font-family: tahoma;
}
option {
  text-align: center;
  font-size: 0.9rem;
  font-family: tahoma;
}

textarea {
  width: 90%;
  height: 60px;
  margin: 6px 0;
  resize: none;
  border-radius: 4px;
  border: 2px ridge lightgreen;
}
.radio-group input[type="radio"]{
  appearance: none;
  width: 15px;
  height: 15px;
  border: 2px solid black;
  vertical-align: middle;
}
button {
  border-radius: 2px;
  background-color: #183216;
  color: whitesmoke;
  cursor: pointer;
  display: inline-block; 
  margin-left: 1%;
  margin-top: 10px;
  width: 98%;
  height: 40px;
  font-size: 1.1rem;
}
.bottom-label {
  text-align: left
}
.radio-group input[type="radio"]:checked+label {
  color: gray;
}
.radio-group input[type="radio"]:checked {
  border-color: black;
  background-color: yellow;
  box-shadow: 1px 1px #333;
}

input:focus, textarea:focus {
  border-color: purple
}

input:invalid, select:invalid,
textarea:invalid {
  border-color: red;
}
input:valid, select:valid, textarea:valid {
  border-color: green;
}
input:first-of-type {
  background-color: whitesmoke;
}
button:hover {
  background-color: midnightblue;
}/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36 OPR/128.0.0.0

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Hey @distant, and welcome to the FCC Community! We’re glad to have you here.

Check into the positioning of your inputs and labels. This is important because the + selector in CSS selects the next adjacent sibling and not the previous one.

Fix that, and you’ll be A-okay!

1 Like
3

Ahh that was it thanks. Is there any way to achieve the same effect if I wanted the checkboxes on the right side ?

4

Unfortunately, there is, as of yet, no previous sibling element selector available in CSS. There are only next element sibling selectors.

You can put each label/input into its own element (such as a <div> ), give that div a class such as radio-option, and then use the :has selector on the .radio-option element along with the :checked pseudo-class and keep the input on the right.

And I just tested this very method, and it will pass the tests, as well!

5

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