Hello,
Fsr I spent a lot of time today trying to make 2 things:
- change a color of radio/buttons in general (like as you see them when you open a webpage)
- change a color of radio/buttons if you select them
I have been making all of this while coding Build a Survey Form in (New) Responsive Web Design Certificate. I know, stupid, but anyway…
This is what I understood (not necessarily correct):
- you don’t have to code it in CSS, there is Javascript for it, but I have no life and I want it in CSS
- in CSS there are multiple choices, but none of them work properly
- filter: grayscale(1); works perfectly, but not for all colors
- appearance: none; you have to create your buttons individually, but fsr my height cannot be opperatable - if you select small width of buttons (e.g. 5px), you cannot select small height neither (the height will be fixed). I know this sound weird, but I can change it from 30px. Under this number it won’t change .
- box-shadow property; this works fine, but there is a problem as with appearence - from some point you cannot set small height as your width
- filter: hue-rotate(); works perfectly, the function changes colors of buttons after selecting them (my closest choice)
Here is my code, I don’t know if I can just sent a link to my project or not, because it’s not in codepen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" conent="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<h1 id="title">School Survey Form</h1>
<p id="description">Please, fill all the empty boxes bellow to help us improve our school.</p>
<form id="survey-form">
<fieldset>
<label id="name-label">Full name: <input id="name" name="name" type="text" placeholder="Enter your name..." required /></label>
<label id="email-label">Email: <input id="email" name="email" type="email" placeholder="Enter your email..." required /></label>
<label id="number-label">Age: <input id="number" name="number" type="number" min="6" max="120" placeholder="Enter your age..." required /></label>
</fieldset>
<fieldset>
<label for="radio-label"><input type="radio" value="radio" name="radio-button" class="inline" required />I am a student</label>
<label for="radio-label"><input type="radio" value="radio" name="radio-button" class="inline" required />I am a teacher</label>
<label for="radio-label"><input type="radio" value="radio" name="radio-button" class="inline" required />I am a parent</label>
</fieldset>
<fieldset>
<p class="headings">What would you like to improve in our school?</p>
<label for="checkbox-label"><input type="checkbox" value="checkbox" name="checkbox-button" class="inline" required /> more complex curriculum</label>
<label for="checkbox-label"><input type="checkbox" value="checkbox" name="checkbox-button" class="inline" required /> better facilities and tools</label>
<label for="checkbox-label"><input type="checkbox" value="checkbox" name="checkbox-button" class="inline" required /> improvements in teaching</label>
<label for="checkbox-label"><input type="checkbox" value="checkbox" name="checkbox-button" class="inline" required /> create more "chill zones" for student</label>
<label for="checkbox-label"><input type="checkbox" value="checkbox" name="checkbox-button" class="inline" required /> build / renovate specialist rooms (e.g. chemical laboratory, physical classroom,...)</label>
</fieldset>
<fieldset>
<label for="dropdown"> Where did you find this survey form?
<select id="dropdown" name="dropdown">
<option value="">(select one)</option>
<option value="1">Instagram</option>
<option value="2">Facebook</option>
<option value="3">The teachers</option>
<option value="4">A friend</option>
<option value="5">A family member</option>
</select>
</label>
<label for="textarea"> Any other questions or comments?
<textarea id="textarea" name="textarea" rows="5" cols="30" placeholder="Please enter additional comments bellow..."></textarea>
</label>
</fieldset>
<input id="submit" type="submit" value="Submit" />
</form>
</body>
</html>
body {
width: 100%;
height: 100vh;
margin: 0;
font-size: 16px;
font-family: 'Oswald', sans-serif;
text-align: center;
background: #C9D479;
color: white;
}
h1, p {
margin: 1em auto;
}
.headings {
text-align: left;
}
form {
width: 60vw;
min-width: 300px;
max-width: 500px;
margin: 0 auto;
}
fieldset {
border: none;
padding: 2em 0;
border-bottom: 3px solid black;
}
fieldset:last-of-type {
border: none;
}
label {
display: block;
margin: 0.5em 0;
text-align: left;
}
input,
select,
textarea {
width: 100%;
margin: 10px 0 0 0;
min-height: 2.5em;
}
input,
select,
textarea {
background: #13762D;
color: white;
}
.inline {
width: unset;
vertical-align: middle;
margin: 0 1em 0 0;
}
input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
color: white;
}
input[type="radio"] {
filter: hue-rotate(-100deg);
}
input[type="checkbox"] {
filter: hue-rotate(-100deg);
}
::placeholder {
color: white;
}
If there is any smart person, I would appreciate your help 