Can someone help me with the styling of my radio buttons here. Im trying to get custom radio buttons but the width and height are not responding just wrapping around the text that is connected to the radio buttons. Im new and theres a lot I dont understand.
input, textarea, select, {
margin: 10px;
width: 100%;
min-height: 2em;
}
body {
background-image: url(https://cdn.pixabay.com/photo/2016/10/16/16/36/miniature-figure-1745718_1280.jpg);
}
.survey {
background-color: burlywood;
margin: 40px;
padding: 20px;
max-width: 500px;
}
input,
textarea,
select {
margin: 2 0 6 0;
width: 100%;
min-height: 2em;
}
select{
margin-top: 10px;
}
fieldset:first-of-type {
margin-left: auto;
margin-right: auto;
margin-top: 5px;
text-align: center;
}
fieldset {
margin: 10px auto;
}
h1, p {
margin: 1em auto;
text-align: center;
}
input[type=radio] {
border: 10px;
width: 25%;
}
input[type=checkbox] {
width: 20%;
margin-top: 40px;
size: 4em;
}
button {
border-radius: 50px;
margin-left: 45%;
}
.custom-radio-btn {
width: 25px;
height: 25px;
border: 2px solid #8B4513;
border-radius: 50%;
margin-left: 10px;
}
And my html if needed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width-initial-scale=1.0" />
<title>Survey Form</title>
<link href="styles.css" rel="style sheet" />
<body>
<div class="survey">
<h1 id="title">
Do you like peanuts?
</h1>
<p id="description">
A survey for the people of peanut land
</p>
<form id="survey-form">
<fieldset>
<label for="survey-form" id="name-label">Name:<input id="name" type="text" placeholder="enter your name" required /></label>
<label for="survey-form" id="email-label">E-mail:<input id="email" placeholder="enter your email" type="email" required></label>
<label id="number-label" for="survey-form">Number(of peanuts):<input id="number" type="number" min="13" max="120" placeholder="please enter #" /></label>
<label for="dropdown-label"><select id="dropdown">
<option value="">select a peanut</option>
<option value="1">roasted</option>
<option value="2">salted</option>
<option value="3">both</option>
</select></label>
</fieldset>
<fieldset>
<label for="peanut-lover" class="custom-radio-btn"><input id="peanut-lover" type="radio" name="what-do-you-love" class="inline" value="1" checked />Peanut Lover</label>
<label for="peanut-hater" class="custom-radio-btn"><input id="peanut-hater" type="radio" name="what-do-you-love" class="inline" value="2" />Peanut Hater</label>
<label for="crunchy"><input class="inline" id="crunchy" type="checkbox" value="1" name="the-qualities-of-peanuts-you-love" required />crunchy</label>
<label for="roasty"><input class="inline" id="roasty" type="checkbox" value="2" name="the-qualities-of-peanuts-you-love" required />roasty</label>
<label for="salty"><input class="inline" id="salty" type="checkbox" value="3" name="the-qualities-of-peanuts-you-love" required />salty</label>
</fieldset>
<fieldset>
<textarea placeholder="additional comments"></textarea>
<button id="submit" type="submit" >submit</button>
</fieldset>
</form>
<div/>
</body>
</head>
</html>
Pravin
December 16, 2023, 3:09pm
2
Hi @taktilemechanic1
I’m just a beginner so take it as not serious.
So I tried running your code and the reason it seems why width and height can’t be changed because of your display is set to inline.
and in display: inline, you can’t set width and height, you should add display: inline-block;.
That should work.
Also if I’m wrong let me know, I haven’t even build a website yet.
Hello,
what you trying to do requires some advanced CSS including the relatively new appearance property:
Learn to create custom, cross-browser, theme-able, scalable radio buttons in pure CSS and ensuring styles remain accessible across states.
I added the link for reference. You can follow the instructions and Google anything you don’t know, or leave it for later when you have learned more about CSS.
Regarding forms you should play it safe and not mess with the default settings. This ensures that your forms get displayed right across browsers. It will also keep your forms accessible.
1 Like
This did not work. I appreciate the honesty. I wanted to ask you what you mean by “running my code”, is there some kind of program that you can run your code through that shows you inconsistencies, redundancies and contradictions? Thanks!
Pravin
December 16, 2023, 3:41pm
5
Hi, I tried adding display: inline-block in your code when I was testing and it did work, I remember it created a perfect circle.
sorry, I shouldn’t have mentioned “running” since it’s not like program but I used vs code and it showed me some type errors which wasn’t important enough to do some error but there was.
Pravin
December 16, 2023, 3:54pm
6
like this it should be?
maybe I’m getting something wrong? let me know
Okay so this is working out great and super educational. Im surprised they havent thought of this until recently it seems simple but what do I know. Anyhow Ive come pretty far in styling the radios but I can’t get the height to respond to any of my commands… Have any idea why that might be?
input, textarea, select {
margin: 10px;
width: 100%;
min-height: 2em;
}
body {
background-image: url(https://cdn.pixabay.com/photo/2015/05/23/13/12/peanuts-780531_1280.jpg);
}
fieldset {
border: none;
}
.survey {
background-color: #cc5910;
margin: 40px;
padding: 20px;
max-width: 500px;
}
input,
textarea,
select {
margin: 7 0 10 0;
width: 100%;
min-height: 2em;
}
hr {
height: 2px;
background-color: #9e2a04;
border-color: #9e2a04;
}
input, textarea {
background-color: #ec9d48;
border-color: #f9d8ac;
}
select{
margin-top: 10px;
}
fieldset:first-of-type {
margin-left: auto;
margin-right: auto;
margin-top: 5px;
text-align: center;
}
fieldset {
margin: 10px auto;
}
h1, p {
margin: 1em auto;
text-align: center;
font-family: georgia, serif;
}
input[type=radio] {
-webkit-appearance: none;
appearance: none;
background-color: #f9d8ac;
margin: 0;
font: inherit;
color: currentColor;
width: 1em;
height: 1em;
border: 1em solid currenColor;
border-radius: 50%;
transform: translateY(0.075em);
}
.formcontrol + .formcontrol {
margin-top: 1em;
}
input[type=checkbox] {
width: 20%;
margin-top: 40px;
size: 4em;
}
label {
font-family: georgia, serif;
font-size: 15
}
button {
border-radius: 50px;
margin-left: 45%;
font-family: georgia, serif;
background-color: #ec9d48;
border-color: #f9d8ac;
}
:root {
--form-control-color: #f9d8ac;
}
*,
*:before,
*:after {
box-sizing: borderbox;
}
.form-control {
font-family: georgia, serif;
font-size: 15;
line-height: 0.5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width-initial-scale=1.0" />
<title>Survey Form</title>
<link href="styles.css" rel="style sheet" />
<body>
<div class="survey">
<h1 id="title">
Do you like peanuts?
</h1>
<p id="description">
A survey for the people of peanut land
</p>
<hr>
<form id="survey-form">
<fieldset>
<label for="survey-form" id="name-label" >Name:<input id="name" type="text" placeholder="name" required /></label>
<label for="survey-form" id="email-label">E-mail:<input id="email" type="email" placeholder="e-mail" required></label>
<label id="number-label" for="survey-form">Number(of peanuts):<input id="number" type="number" min="13" max="120" placeholder="#" /></label>
<label for="dropdown-label"><select id="dropdown">
<option value="">select a type of precessing</option>
<option value="1">butter</option>
<option value="2">oil</option>
<option value="3">powder</option>
</select></label>
</fieldset>
<fieldset>
<label class="form-control"><input type="radio" name="what-do-you-love" value="1" checked />Peanut Lover</label>
<label class="form-control"><input type="radio" name="what-do-you-love" value="2" />Peanut Hater</label>
<label for="crunchy"><input class="inline-block" id="crunchy" type="checkbox" value="1" name="the-qualities-of-peanuts-you-love" required />crunchy</label>
<label for="roasty"><input class="inline-block" id="roasty" type="checkbox" value="2" name="the-qualities-of-peanuts-you-love" required />roasty</label>
<label for="salty"><input class="inline-block" id="salty" type="checkbox" value="3" name="the-qualities-of-peanuts-you-love" required />salty</label>
</fieldset>
<fieldset>
<hr class="bottom-line">
<footer>
<textarea placeholder="additional comments"></textarea>
<button id="submit" type="submit" >submit</button>
</footer>
</fieldset>
</form>
<div/>
</body>
</head>
</html>
No idea without checking your CSS line by line.
Be aware that CSS styles can cancel and block each other if they are not organized right. It’s not as easy as it seems and CSS is hated by many experienced developers because of its often strange behavior.
Credit for trying, but best leave those advanced techniques when you have a better grasp at the CSS basics, it will give you better control.
Pravin
December 17, 2023, 5:37am
10
Hi, if you’re talking about input type radio in your css then, it’s working I tried changing height and it does respond.
Also there are many things in your css which is odd first:
you added defaults like *, before, after in which you set everything to border box, I think it should be at top of the css.
also, there was a type which causing border box to not work at all, it should be border-box not borderbox.
There are like 10+ properties which aren’t working in your css.
It requires some advanced CSS
system
June 16, 2024, 6:37pm
12
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
