Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.

I need fresh view, i add label and add to this “:checked” but it still dont working((

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 action="hiretdinovrinat@gmail.com">
                <h1>Job Application Form</h1>
                <label for="name" class="new-label">Name (requere):</label>
                <input class="new-input" type="text" id="name" name="name" placeholder="Maria Alejandra Castaneda" required>
                <label for="email" class="new-label">E-mail (requere):</label>
                <input class="new-input" type="email" id="email" name="email" placeholder="papajo@gmail.com" required>
                <label for="position" class="new-label">Wished possision (your education):</label>
                <select name="position" id="position" class="new-input">
                    <option value="developer">Develeper</option>
                    <option value="designer">Desighner</option>
                    <option value="web-developer">Web-Developer</option>
                    <option selected value="java-developer">Java-Developer</option>
                </select>
                <fieldset class="radio-group">
                    <legend>Prefiered working time</legend>
                    <label for="full-time">Full-time</label>
                    <input id="full-time" type="radio" name="availability"/>
                    <label for="part-time">Part-time</label>
                    <input id="part-time" type="radio" name="availability"/>
                </fieldset>
                <label class="new-label" for="message">Why do you want to take this job?</label>
                <textarea cols="70" rows="10" name="message" id="message"></textarea>
                <button type="submit">Submit buttom</button>
            </form>
        </div>
    </body>
</html>


/* file: styles.css */
body {
    background-color: aliceblue;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;    
}
.container {
    background-color: aquamarine;
    max-width: 600px;
    padding: 10px;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgb(5, 5, 112);
}
.radio-group, .new-label, .new-input {
    text-align: left;
    display: block;
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 10px;
}
.new-input {
    width: 95%;
}
textarea{
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px black;
}
input:focus, textarea:focus{
    border-color: blue;
}
input:invalid, select:invalid, textarea:invalid{
    border-color:red;
}
input:valid, select:valid, textarea:valid{
    border-color:green;
}

button {
    margin-top: 25px;
    margin-left: 20px;
    margin-right: 75%;
    margin-bottom: 30px;
    display: flex;
    text-decoration: none;
    font-size: 1em;
    padding: 10px;
    border-radius: 5px;
    background-color: cadetblue;
    transition: background-color 0.3s ease;
}
button:hover {
    background-color: orangered;
}
button:active {
    background-color: midnightblue;
}
button:focus {
    background-color: brown;
}
.radio-group input[type="radio"]:checked{
    border-color: #0c345f;
    background-color: #1b66b5;
    color: #fff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
.radio-group input[type="radio"]:checked + label {
  color: blue;
}

input:nth-child(1) {
    border-radius: 8px;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Thanks you can close topic I figured out