Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

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

I am unable to solve step 15

Your code so far

<!-- file: index.html -->


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Mobile Safari/537.36

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Could you show us your full code please? (Paste it into your original post in between the sets of triple backticks).

3

Tell us what’s happening:

I am unable to solve step 15 of the job application

Your code so far

<!-- file: index.html -->

```/* General Styles */
body {
  font-family: Arial, sans-serif;
    background-color: #f4f4f4;
      margin: 0;
        padding: 20px;
        }

        .container {
          background-color: #fff;
            border-radius: 8px;
              padding: 20px;
                width: 100%;
                  max-width: 600px;
                    margin: 0 auto;
                      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                      }

                      form {
                        display: flex;
                          flex-direction: column;
                          }

                          label {
                            margin-bottom: 8px;
                              font-weight: bold;
                              }

                              input, select, textarea, button {
                                padding: 10px;
                                  margin-bottom: 15px;
                                    border-radius: 5px;
                                      border: 1px solid #ccc;
                                      }

                                      input:focus, textarea:focus {
                                        border-color: #4a90e2;
                                          outline: none;
                                          }

                                          input:invalid, select:invalid, textarea:invalid {
                                            border-color: red;
                                            }

                                            input:valid, select:valid, textarea:valid {
                                              border-color: green;
                                              }

                                              button {
                                                background-color: #4a90e2;
                                                  color: white;
                                                    border: none;
                                                      cursor: pointer;
                                                        transition: background-color 0.3s ease;
                                                        }

                                                        button:hover {
                                                          background-color: #357ab7;
                                                          }

                                                          fieldset {
                                                            border: none;
                                                            }

                                                            .radio-group label {
                                                              display: block;
                                                                margin-bottom: 10px;
                                                                }

                                                                .radio-group input[type="radio"]:checked{
                                                                  border-color: #4a90e2;
                                                                    background-color: #4a90e2;
                                                                      box-shadow: 0 0 5px rgba(74, 144, 226, 0.7);
                                                                      }
.radio-group input[type="radio"]:checked + label{
    color: red;
    }


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

                                                                          input:nth-child(2) {
                                                                            border-radius: 0 10px 10px 0;
                                                                            }

                                                                            /* Responsive Design */
                                                                            @media (max-width: 600px) {
                                                                              .container {
                                                                                  padding: 15px;
                                                                                    }

                                                                                      input, select, textarea, button {
                                                                                          font-size: 14px;
                                                                                            }
                                                                                            }
                                                                                            

```css
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Mobile Safari/537.36

Challenge Information:

Build a Job Application Form - Build a Job Application Form

4

Hey, we need the HTML that goes with all the CSS to check it.

5

I have merged your two topics on this lab, please do not open multiple topics for a lab