Hi!
I just finished the job application form lab and I have some questions.
Here is the solution I had before checking the user story. (I prefer to do it that way, having a look at the example and try to do it by myself, so I have to find solutions by myself before checking the suggestions)
here is the 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>
<section>
<h1>Job Application Form</h1>
<form action="" method="post">
<!-- personaldetails -->
<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>
<!-- Job position -->
<label for="position">Position:</label>
<select id="position" name="position" required>
<option value="">Select a position</option>
<option value="developer">Developer</option>
<option value="designer">Designer</option>
<option value="manager">Manager</option>
</select>
<!-- availability -->
<fieldset>
<legend>Availability</legend>
<input type="radio" id="full-time" name="availability" checked>
<label for="full-time">Full-Time</label>
<input type="radio" id="part-time" name="availability">
<label for="part-time">Part-Time</label>
</fieldset>
<!-- motivation -->
<label for="motivation">Why do you want this job?</label>
<textarea name="motivation" id="motivation" placeholder="Write your motivation" cols="12" rows="8" required></textarea>
<button type="submit">Submit Application</button>
</form>
</section>
</body>
</html>
and the CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
padding: 1rem auto;
}
input, select, textarea, button {
font: inherit
}
h1 {
font-size: 2rem;
margin: 2rem auto;
text-align: center;
word-break: break-word;
}
section {
width: 90%;
/* min-width: fit-content; */
max-width: 550px;
height: fit-content;
display: block;
margin-inline: auto;
padding: 1rem;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
border-radius: 5px;
}
label, input:not([type="radio"]), select, fieldset, textarea {
display: inline-block;
width: 100%;
border-radius: 5px;
padding: 0.2rem;
}
:is(input, textarea)::placeholder {
font-size: 0.8rem;
}
input, select, fieldset, textarea {
margin-bottom: 1rem;
}
label {
font-size: 1.2rem;
}
fieldset input {
margin-inline: 0.2rem;
width: 1;
}
fieldset label {
margin-left: 0.2rem;
max-width: 30%;
}
:is(input:not([type="radio"]), select, textarea):focus {
border: 1px solid blue;
outline: 1px solid hsl(240, 100%, 50%) ;
box-shadow: 2px 2px 2px 1px hsla(220, 100%, 70%, 0.679);
}
:is(input, textarea, select):required:invalid{
border: 1px solid red;
}
:is(input, textarea, select):valid {
border: 1px solid forestgreen;
}
legend {
margin: 0 auto;
}
input[type="radio"] {
appearance: none;
}
input[type="radio"] {
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid black;
vertical-align: -16px;
cursor: pointer;
}
input[type="radio"]::before {
display: block;
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background-color: green;
transform: translate(1.4px, 1.4px) scale(0);
transform-origin: center;
transition: all 0.2s ease-in;
}
input[type="radio"]:checked::before {
transform: translate(1.4px, 1.4px) scale(1) ;
transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2);
color: green;
}
input[type="radio"]:checked+label {
color: green;
box-shadow: 1px 1px 1px rgb(238, 238, 238);
text-decoration: underline;
transition: all 0.3s ease-in-out;
}
button {
width: 100%;
margin: 0.7rem auto;
padding: 0.7rem;
background-color: green;
color: whitesmoke;
border: none;
border-radius: 5px;
box-shadow: 2px 2px 2px;
transition: 0.4s;
}
button:hover {
background-color: darkblue;
}
So my first question is about the input’s borders. They stay red until a valid input is given. Can I set another color when they are empty and not active?
As for when they are :focus the border doesn’t change color and stay red until a valid input is given. The solution I found was to style the outline and box-shadow instead. But I still have the red border inside the outline.
Both this issues I found with my solution as well as with the modified html and css files to pass the freecodecamp test. (should I paste those as well?)
Concerning the styling of the radio button, I found a solution checking on MDN how to do it. I’m quite happy with the result excpet I noticed, that if I open the HTML file with chrome everything is fine but if I open it with firefox the green dot inside the radio button is not well aligned. Is there a way to make it work on all browsers?
I also wanted to check if I understood well the procedure I applied to style the radio button.
•First I reset the style with appearance:none
•Then I create the round border from scratch, giving it its width, height, border thickness, style, color and radius . the vertical-align property bring the circle down to align it with the label. I did it with trial and error, adjusting the height manually is there another way to do it?
•The ::before pseudo-element allow us to create what will be the green dot inside the radio button. That was a bit misterious to me. So tell me if I’m right: basically we create the green dot ::before so visually before the border and then we use transform: translate() to move it inside the previously created border.
The scale (0) is to make it not visible when the button is not checked, it turns into scale(1) when :checked
transform-origin is just to say where I want my transition to start from.
The void content, I tried and if not there the green dot remains invisible. I thought it was just to put an image instead of the dot like: 
But it seems essential to the whole styling. I couldn’t find the reason why on MDN. For the content property it gives various value, none normal… but not “”
Could someone explain how does that works?
I think these are all my questions for now!
Thank you!
Thank you!