How can I align radio button with label, legend and fieldset in One single line
0
So I am creating a Driver Registration Form for my project and i need help in aligning these radio button in one single line. I tried to use the Clear: both; method and also the method mention below :
form label[for="yes"],
form label[for="yes"] + input,
form label[for="no"],
form label[for="no"] + input {
clear: none;
width: auto;
}
But nothing is working :( . I also tried to use paragraph tag but that's not working too.
Here is the Snippet :
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box{
width: 300px;
padding: 40px;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%,-50%);
background: #191919;
text-align: center;
}
.box h1{
color: white;
text-transform: uppercase;
font-weight: 500;
}
select > option{
background: #191919;
color: white;
}
.box textarea{
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"] + input,
.box label[for="Female"],
.box label[for="Female"] + input,
.box label[for="Other"],
.box label[for="Other"] + input,
.box input[type = "radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type = "text"],.box input[type = "password"], .box select, .box input[type = "tel"], .box textarea, .box fieldset,
.box input[type = "radio"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus,.box select:focus, .box input[type = "tel"]:focus,
.box textarea:focus{
width: 280px;
border-color: #2ecc71;
}
.box input[type = "submit"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover{
background: #2ecc71;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Driver-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Driver Registration</h1>
<input type="text" name="" placeholder="First Name" required>
<input type="text" name="" placeholder="Middle Name" required>
<input type="text" name="" placeholder="Last Name" required>
<input type="tel" name="phone_number" placeholder="Mobile Number" pattern="[0-9]{10}" required>
<input type="tel" name="phone_number" placeholder="Emergency Number" pattern="[0-9]{10}" required>
<textarea name="comments" placeholder="Address" maxlength="500" required></textarea>
<input type="tel" name="" placeholder="License Number" pattern="[A-Z]{2}[0-9]{13}" required>
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other"> Other </label>
</fieldset>
<select required id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="Automobile" >Automobile</option>
<option value="Civill" >Civil</option>
<option value="Computer" >Computer</option>
<option value="Electrical" >Electrical</option>
<option value="Mechanical" >Mechanical</option>
</select>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>Help would be appreciated!
html css html5 css3 radio-button
edited Dec 31 '18 at 7:08
Rajendra arora
1,50211018
asked Dec 31 '18 at 7:05
Devarsh BhattDevarsh Bhatt
2116
add a comment |
0
So I am creating a Driver Registration Form for my project and i need help in aligning these radio button in one single line. I tried to use the Clear: both; method and also the method mention below :
form label[for="yes"],
form label[for="yes"] + input,
form label[for="no"],
form label[for="no"] + input {
clear: none;
width: auto;
}
But nothing is working :( . I also tried to use paragraph tag but that's not working too.
Here is the Snippet :
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box{
width: 300px;
padding: 40px;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%,-50%);
background: #191919;
text-align: center;
}
.box h1{
color: white;
text-transform: uppercase;
font-weight: 500;
}
select > option{
background: #191919;
color: white;
}
.box textarea{
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"] + input,
.box label[for="Female"],
.box label[for="Female"] + input,
.box label[for="Other"],
.box label[for="Other"] + input,
.box input[type = "radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type = "text"],.box input[type = "password"], .box select, .box input[type = "tel"], .box textarea, .box fieldset,
.box input[type = "radio"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus,.box select:focus, .box input[type = "tel"]:focus,
.box textarea:focus{
width: 280px;
border-color: #2ecc71;
}
.box input[type = "submit"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover{
background: #2ecc71;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Driver-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Driver Registration</h1>
<input type="text" name="" placeholder="First Name" required>
<input type="text" name="" placeholder="Middle Name" required>
<input type="text" name="" placeholder="Last Name" required>
<input type="tel" name="phone_number" placeholder="Mobile Number" pattern="[0-9]{10}" required>
<input type="tel" name="phone_number" placeholder="Emergency Number" pattern="[0-9]{10}" required>
<textarea name="comments" placeholder="Address" maxlength="500" required></textarea>
<input type="tel" name="" placeholder="License Number" pattern="[A-Z]{2}[0-9]{13}" required>
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other"> Other </label>
</fieldset>
<select required id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="Automobile" >Automobile</option>
<option value="Civill" >Civil</option>
<option value="Computer" >Computer</option>
<option value="Electrical" >Electrical</option>
<option value="Mechanical" >Mechanical</option>
</select>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>Help would be appreciated!
html css html5 css3 radio-button
edited Dec 31 '18 at 7:08
Rajendra arora
1,50211018
asked Dec 31 '18 at 7:05
Devarsh BhattDevarsh Bhatt
2116
You want all of them in one line ? or the radio button and label in one line then next radio and label in next line ?
– Nandita Arora Sharma
Dec 31 '18 at 7:09
I want it like Gender then in next line all the radio buttons & the radio button should be in same line
– Devarsh Bhatt
Dec 31 '18 at 7:13
Added an answer, please check if it works for you
– Nandita Arora Sharma
Dec 31 '18 at 7:14
add a comment |
0
0
0
So I am creating a Driver Registration Form for my project and i need help in aligning these radio button in one single line. I tried to use the Clear: both; method and also the method mention below :
form label[for="yes"],
form label[for="yes"] + input,
form label[for="no"],
form label[for="no"] + input {
clear: none;
width: auto;
}
But nothing is working :( . I also tried to use paragraph tag but that's not working too.
Here is the Snippet :
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box{
width: 300px;
padding: 40px;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%,-50%);
background: #191919;
text-align: center;
}
.box h1{
color: white;
text-transform: uppercase;
font-weight: 500;
}
select > option{
background: #191919;
color: white;
}
.box textarea{
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"] + input,
.box label[for="Female"],
.box label[for="Female"] + input,
.box label[for="Other"],
.box label[for="Other"] + input,
.box input[type = "radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type = "text"],.box input[type = "password"], .box select, .box input[type = "tel"], .box textarea, .box fieldset,
.box input[type = "radio"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus,.box select:focus, .box input[type = "tel"]:focus,
.box textarea:focus{
width: 280px;
border-color: #2ecc71;
}
.box input[type = "submit"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover{
background: #2ecc71;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Driver-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Driver Registration</h1>
<input type="text" name="" placeholder="First Name" required>
<input type="text" name="" placeholder="Middle Name" required>
<input type="text" name="" placeholder="Last Name" required>
<input type="tel" name="phone_number" placeholder="Mobile Number" pattern="[0-9]{10}" required>
<input type="tel" name="phone_number" placeholder="Emergency Number" pattern="[0-9]{10}" required>
<textarea name="comments" placeholder="Address" maxlength="500" required></textarea>
<input type="tel" name="" placeholder="License Number" pattern="[A-Z]{2}[0-9]{13}" required>
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other"> Other </label>
</fieldset>
<select required id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="Automobile" >Automobile</option>
<option value="Civill" >Civil</option>
<option value="Computer" >Computer</option>
<option value="Electrical" >Electrical</option>
<option value="Mechanical" >Mechanical</option>
</select>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>Help would be appreciated!
html css html5 css3 radio-button
edited Dec 31 '18 at 7:08
Rajendra arora
1,50211018
asked Dec 31 '18 at 7:05
Devarsh BhattDevarsh Bhatt
2116
So I am creating a Driver Registration Form for my project and i need help in aligning these radio button in one single line. I tried to use the Clear: both; method and also the method mention below :
form label[for="yes"],
form label[for="yes"] + input,
form label[for="no"],
form label[for="no"] + input {
clear: none;
width: auto;
}
But nothing is working :( . I also tried to use paragraph tag but that's not working too.
Here is the Snippet :
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box{
width: 300px;
padding: 40px;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%,-50%);
background: #191919;
text-align: center;
}
.box h1{
color: white;
text-transform: uppercase;
font-weight: 500;
}
select > option{
background: #191919;
color: white;
}
.box textarea{
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"] + input,
.box label[for="Female"],
.box label[for="Female"] + input,
.box label[for="Other"],
.box label[for="Other"] + input,
.box input[type = "radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type = "text"],.box input[type = "password"], .box select, .box input[type = "tel"], .box textarea, .box fieldset,
.box input[type = "radio"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus,.box select:focus, .box input[type = "tel"]:focus,
.box textarea:focus{
width: 280px;
border-color: #2ecc71;
}
.box input[type = "submit"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover{
background: #2ecc71;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Driver-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Driver Registration</h1>
<input type="text" name="" placeholder="First Name" required>
<input type="text" name="" placeholder="Middle Name" required>
<input type="text" name="" placeholder="Last Name" required>
<input type="tel" name="phone_number" placeholder="Mobile Number" pattern="[0-9]{10}" required>
<input type="tel" name="phone_number" placeholder="Emergency Number" pattern="[0-9]{10}" required>
<textarea name="comments" placeholder="Address" maxlength="500" required></textarea>
<input type="tel" name="" placeholder="License Number" pattern="[A-Z]{2}[0-9]{13}" required>
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other"> Other </label>
</fieldset>
<select required id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="Automobile" >Automobile</option>
<option value="Civill" >Civil</option>
<option value="Computer" >Computer</option>
<option value="Electrical" >Electrical</option>
<option value="Mechanical" >Mechanical</option>
</select>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>Help would be appreciated!
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box{
width: 300px;
padding: 40px;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%,-50%);
background: #191919;
text-align: center;
}
.box h1{
color: white;
text-transform: uppercase;
font-weight: 500;
}
select > option{
background: #191919;
color: white;
}
.box textarea{
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"] + input,
.box label[for="Female"],
.box label[for="Female"] + input,
.box label[for="Other"],
.box label[for="Other"] + input,
.box input[type = "radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type = "text"],.box input[type = "password"], .box select, .box input[type = "tel"], .box textarea, .box fieldset,
.box input[type = "radio"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus,.box select:focus, .box input[type = "tel"]:focus,
.box textarea:focus{
width: 280px;
border-color: #2ecc71;
}
.box input[type = "submit"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover{
background: #2ecc71;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Driver-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Driver Registration</h1>
<input type="text" name="" placeholder="First Name" required>
<input type="text" name="" placeholder="Middle Name" required>
<input type="text" name="" placeholder="Last Name" required>
<input type="tel" name="phone_number" placeholder="Mobile Number" pattern="[0-9]{10}" required>
<input type="tel" name="phone_number" placeholder="Emergency Number" pattern="[0-9]{10}" required>
<textarea name="comments" placeholder="Address" maxlength="500" required></textarea>
<input type="tel" name="" placeholder="License Number" pattern="[A-Z]{2}[0-9]{13}" required>
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other"> Other </label>
</fieldset>
<select required id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="Automobile" >Automobile</option>
<option value="Civill" >Civil</option>
<option value="Computer" >Computer</option>
<option value="Electrical" >Electrical</option>
<option value="Mechanical" >Mechanical</option>
</select>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box{
width: 300px;
padding: 40px;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%,-50%);
background: #191919;
text-align: center;
}
.box h1{
color: white;
text-transform: uppercase;
font-weight: 500;
}
select > option{
background: #191919;
color: white;
}
.box textarea{
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"] + input,
.box label[for="Female"],
.box label[for="Female"] + input,
.box label[for="Other"],
.box label[for="Other"] + input,
.box input[type = "radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type = "text"],.box input[type = "password"], .box select, .box input[type = "tel"], .box textarea, .box fieldset,
.box input[type = "radio"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus,.box select:focus, .box input[type = "tel"]:focus,
.box textarea:focus{
width: 280px;
border-color: #2ecc71;
}
.box input[type = "submit"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover{
background: #2ecc71;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Driver-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Driver Registration</h1>
<input type="text" name="" placeholder="First Name" required>
<input type="text" name="" placeholder="Middle Name" required>
<input type="text" name="" placeholder="Last Name" required>
<input type="tel" name="phone_number" placeholder="Mobile Number" pattern="[0-9]{10}" required>
<input type="tel" name="phone_number" placeholder="Emergency Number" pattern="[0-9]{10}" required>
<textarea name="comments" placeholder="Address" maxlength="500" required></textarea>
<input type="tel" name="" placeholder="License Number" pattern="[A-Z]{2}[0-9]{13}" required>
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other"> Other </label>
</fieldset>
<select required id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="Automobile" >Automobile</option>
<option value="Civill" >Civil</option>
<option value="Computer" >Computer</option>
<option value="Electrical" >Electrical</option>
<option value="Mechanical" >Mechanical</option>
</select>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>html css html5 css3 radio-button
html css html5 css3 radio-button
edited Dec 31 '18 at 7:08
Rajendra arora
1,50211018
asked Dec 31 '18 at 7:05
Devarsh BhattDevarsh Bhatt
2116
edited Dec 31 '18 at 7:08
Rajendra arora
1,50211018
asked Dec 31 '18 at 7:05
Devarsh BhattDevarsh Bhatt
2116
edited Dec 31 '18 at 7:08
Rajendra arora
1,50211018
edited Dec 31 '18 at 7:08
Rajendra arora
1,50211018
edited Dec 31 '18 at 7:08
Rajendra arora
1,50211018
1,50211018
asked Dec 31 '18 at 7:05
Devarsh BhattDevarsh Bhatt
2116
asked Dec 31 '18 at 7:05
Devarsh BhattDevarsh Bhatt
2116
asked Dec 31 '18 at 7:05
Devarsh BhattDevarsh Bhatt
2116
2116
You want all of them in one line ? or the radio button and label in one line then next radio and label in next line ?
– Nandita Arora Sharma
Dec 31 '18 at 7:09
I want it like Gender then in next line all the radio buttons & the radio button should be in same line
– Devarsh Bhatt
Dec 31 '18 at 7:13
Added an answer, please check if it works for you
– Nandita Arora Sharma
Dec 31 '18 at 7:14
add a comment |
You want all of them in one line ? or the radio button and label in one line then next radio and label in next line ?
– Nandita Arora Sharma
Dec 31 '18 at 7:09
I want it like Gender then in next line all the radio buttons & the radio button should be in same line
– Devarsh Bhatt
Dec 31 '18 at 7:13
Added an answer, please check if it works for you
– Nandita Arora Sharma
Dec 31 '18 at 7:14
You want all of them in one line ? or the radio button and label in one line then next radio and label in next line ?
– Nandita Arora Sharma
Dec 31 '18 at 7:09
You want all of them in one line ? or the radio button and label in one line then next radio and label in next line ?
– Nandita Arora Sharma
Dec 31 '18 at 7:09
I want it like Gender then in next line all the radio buttons & the radio button should be in same line
– Devarsh Bhatt
Dec 31 '18 at 7:13
I want it like Gender then in next line all the radio buttons & the radio button should be in same line
– Devarsh Bhatt
Dec 31 '18 at 7:13
Added an answer, please check if it works for you
– Nandita Arora Sharma
Dec 31 '18 at 7:14
Added an answer, please check if it works for you
– Nandita Arora Sharma
Dec 31 '18 at 7:14
add a comment |
2 Answers
2
active
oldest
votes
1
Add the following styles
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select>option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"]+input,
.box label[for="Female"],
.box label[for="Female"]+input,
.box label[for="Other"],
.box label[for="Other"]+input,
.box input[type="radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type="text"],
.box input[type="password"],
.box select,
.box input[type="tel"],
.box textarea,
.box fieldset,
.box input[type="radio"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus,
.box select:focus,
.box input[type="tel"]:focus,
.box textarea:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Driver-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Driver Registration</h1>
<input type="text" name="" placeholder="First Name" required>
<input type="text" name="" placeholder="Middle Name" required>
<input type="text" name="" placeholder="Last Name" required>
<input type="tel" name="phone_number" placeholder="Mobile Number" pattern="[0-9]{10}" required>
<input type="tel" name="phone_number" placeholder="Emergency Number" pattern="[0-9]{10}" required>
<textarea name="comments" placeholder="Address" maxlength="500" required></textarea>
<input type="tel" name="" placeholder="License Number" pattern="[A-Z]{2}[0-9]{13}" required>
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other"> Other </label>
</fieldset>
<select required id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="Automobile">Automobile</option>
<option value="Civill">Civil</option>
<option value="Computer">Computer</option>
<option value="Electrical">Electrical</option>
<option value="Mechanical">Mechanical</option>
</select>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>answered Dec 31 '18 at 7:13
Nandita Arora SharmaNandita Arora Sharma
9,4832718
Thanks, It's Correct and i have one more question like when i select any of the button the :focus animation should happen
– Devarsh Bhatt
Dec 31 '18 at 7:18
I dont think its possible with pure CSS,
– Nandita Arora Sharma
Dec 31 '18 at 7:22
Ok fine No Problem. Thanks for your help really appreciated
– Devarsh Bhatt
Dec 31 '18 at 7:25
add a comment |
0
I guess you can try something like give the display: flex property to the legend tag (in case you want the labels in a line too). It will look something like this:
legend {
display: flex;
justify-content: space-evenly;
align-items: center;
}
Of course you can assign a class instead of styling the tag.
More on flex-box can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Dec 31 '18 at 7:14
Sagi RikaSagi Rika
1519
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53984591%2fhow-can-i-align-radio-button-with-label-legend-and-fieldset-in-one-single-line%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Add the following styles
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select>option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"]+input,
.box label[for="Female"],
.box label[for="Female"]+input,
.box label[for="Other"],
.box label[for="Other"]+input,
.box input[type="radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type="text"],
.box input[type="password"],
.box select,
.box input[type="tel"],
.box textarea,
.box fieldset,
.box input[type="radio"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus,
.box select:focus,
.box input[type="tel"]:focus,
.box textarea:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Driver-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Driver Registration</h1>
<input type="text" name="" placeholder="First Name" required>
<input type="text" name="" placeholder="Middle Name" required>
<input type="text" name="" placeholder="Last Name" required>
<input type="tel" name="phone_number" placeholder="Mobile Number" pattern="[0-9]{10}" required>
<input type="tel" name="phone_number" placeholder="Emergency Number" pattern="[0-9]{10}" required>
<textarea name="comments" placeholder="Address" maxlength="500" required></textarea>
<input type="tel" name="" placeholder="License Number" pattern="[A-Z]{2}[0-9]{13}" required>
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other"> Other </label>
</fieldset>
<select required id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="Automobile">Automobile</option>
<option value="Civill">Civil</option>
<option value="Computer">Computer</option>
<option value="Electrical">Electrical</option>
<option value="Mechanical">Mechanical</option>
</select>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>answered Dec 31 '18 at 7:13
Nandita Arora SharmaNandita Arora Sharma
9,4832718
Thanks, It's Correct and i have one more question like when i select any of the button the :focus animation should happen
– Devarsh Bhatt
Dec 31 '18 at 7:18
I dont think its possible with pure CSS,
– Nandita Arora Sharma
Dec 31 '18 at 7:22
Ok fine No Problem. Thanks for your help really appreciated
– Devarsh Bhatt
Dec 31 '18 at 7:25
add a comment |
1
Add the following styles
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select>option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"]+input,
.box label[for="Female"],
.box label[for="Female"]+input,
.box label[for="Other"],
.box label[for="Other"]+input,
.box input[type="radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type="text"],
.box input[type="password"],
.box select,
.box input[type="tel"],
.box textarea,
.box fieldset,
.box input[type="radio"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus,
.box select:focus,
.box input[type="tel"]:focus,
.box textarea:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Driver-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Driver Registration</h1>
<input type="text" name="" placeholder="First Name" required>
<input type="text" name="" placeholder="Middle Name" required>
<input type="text" name="" placeholder="Last Name" required>
<input type="tel" name="phone_number" placeholder="Mobile Number" pattern="[0-9]{10}" required>
<input type="tel" name="phone_number" placeholder="Emergency Number" pattern="[0-9]{10}" required>
<textarea name="comments" placeholder="Address" maxlength="500" required></textarea>
<input type="tel" name="" placeholder="License Number" pattern="[A-Z]{2}[0-9]{13}" required>
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other"> Other </label>
</fieldset>
<select required id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="Automobile">Automobile</option>
<option value="Civill">Civil</option>
<option value="Computer">Computer</option>
<option value="Electrical">Electrical</option>
<option value="Mechanical">Mechanical</option>
</select>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>answered Dec 31 '18 at 7:13
Nandita Arora SharmaNandita Arora Sharma
9,4832718
Thanks, It's Correct and i have one more question like when i select any of the button the :focus animation should happen
– Devarsh Bhatt
Dec 31 '18 at 7:18
I dont think its possible with pure CSS,
– Nandita Arora Sharma
Dec 31 '18 at 7:22
Ok fine No Problem. Thanks for your help really appreciated
– Devarsh Bhatt
Dec 31 '18 at 7:25
add a comment |
1
1
1
Add the following styles
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select>option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"]+input,
.box label[for="Female"],
.box label[for="Female"]+input,
.box label[for="Other"],
.box label[for="Other"]+input,
.box input[type="radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type="text"],
.box input[type="password"],
.box select,
.box input[type="tel"],
.box textarea,
.box fieldset,
.box input[type="radio"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus,
.box select:focus,
.box input[type="tel"]:focus,
.box textarea:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Driver-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Driver Registration</h1>
<input type="text" name="" placeholder="First Name" required>
<input type="text" name="" placeholder="Middle Name" required>
<input type="text" name="" placeholder="Last Name" required>
<input type="tel" name="phone_number" placeholder="Mobile Number" pattern="[0-9]{10}" required>
<input type="tel" name="phone_number" placeholder="Emergency Number" pattern="[0-9]{10}" required>
<textarea name="comments" placeholder="Address" maxlength="500" required></textarea>
<input type="tel" name="" placeholder="License Number" pattern="[A-Z]{2}[0-9]{13}" required>
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other"> Other </label>
</fieldset>
<select required id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="Automobile">Automobile</option>
<option value="Civill">Civil</option>
<option value="Computer">Computer</option>
<option value="Electrical">Electrical</option>
<option value="Mechanical">Mechanical</option>
</select>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>answered Dec 31 '18 at 7:13
Nandita Arora SharmaNandita Arora Sharma
9,4832718
Add the following styles
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select>option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"]+input,
.box label[for="Female"],
.box label[for="Female"]+input,
.box label[for="Other"],
.box label[for="Other"]+input,
.box input[type="radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type="text"],
.box input[type="password"],
.box select,
.box input[type="tel"],
.box textarea,
.box fieldset,
.box input[type="radio"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus,
.box select:focus,
.box input[type="tel"]:focus,
.box textarea:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Driver-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Driver Registration</h1>
<input type="text" name="" placeholder="First Name" required>
<input type="text" name="" placeholder="Middle Name" required>
<input type="text" name="" placeholder="Last Name" required>
<input type="tel" name="phone_number" placeholder="Mobile Number" pattern="[0-9]{10}" required>
<input type="tel" name="phone_number" placeholder="Emergency Number" pattern="[0-9]{10}" required>
<textarea name="comments" placeholder="Address" maxlength="500" required></textarea>
<input type="tel" name="" placeholder="License Number" pattern="[A-Z]{2}[0-9]{13}" required>
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other"> Other </label>
</fieldset>
<select required id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="Automobile">Automobile</option>
<option value="Civill">Civil</option>
<option value="Computer">Computer</option>
<option value="Electrical">Electrical</option>
<option value="Mechanical">Mechanical</option>
</select>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select>option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"]+input,
.box label[for="Female"],
.box label[for="Female"]+input,
.box label[for="Other"],
.box label[for="Other"]+input,
.box input[type="radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type="text"],
.box input[type="password"],
.box select,
.box input[type="tel"],
.box textarea,
.box fieldset,
.box input[type="radio"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus,
.box select:focus,
.box input[type="tel"]:focus,
.box textarea:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Driver-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Driver Registration</h1>
<input type="text" name="" placeholder="First Name" required>
<input type="text" name="" placeholder="Middle Name" required>
<input type="text" name="" placeholder="Last Name" required>
<input type="tel" name="phone_number" placeholder="Mobile Number" pattern="[0-9]{10}" required>
<input type="tel" name="phone_number" placeholder="Emergency Number" pattern="[0-9]{10}" required>
<textarea name="comments" placeholder="Address" maxlength="500" required></textarea>
<input type="tel" name="" placeholder="License Number" pattern="[A-Z]{2}[0-9]{13}" required>
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other"> Other </label>
</fieldset>
<select required id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="Automobile">Automobile</option>
<option value="Civill">Civil</option>
<option value="Computer">Computer</option>
<option value="Electrical">Electrical</option>
<option value="Mechanical">Mechanical</option>
</select>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select>option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"]+input,
.box label[for="Female"],
.box label[for="Female"]+input,
.box label[for="Other"],
.box label[for="Other"]+input,
.box input[type="radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type="text"],
.box input[type="password"],
.box select,
.box input[type="tel"],
.box textarea,
.box fieldset,
.box input[type="radio"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus,
.box select:focus,
.box input[type="tel"]:focus,
.box textarea:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Driver-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Driver Registration</h1>
<input type="text" name="" placeholder="First Name" required>
<input type="text" name="" placeholder="Middle Name" required>
<input type="text" name="" placeholder="Last Name" required>
<input type="tel" name="phone_number" placeholder="Mobile Number" pattern="[0-9]{10}" required>
<input type="tel" name="phone_number" placeholder="Emergency Number" pattern="[0-9]{10}" required>
<textarea name="comments" placeholder="Address" maxlength="500" required></textarea>
<input type="tel" name="" placeholder="License Number" pattern="[A-Z]{2}[0-9]{13}" required>
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other"> Other </label>
</fieldset>
<select required id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="Automobile">Automobile</option>
<option value="Civill">Civil</option>
<option value="Computer">Computer</option>
<option value="Electrical">Electrical</option>
<option value="Mechanical">Mechanical</option>
</select>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>answered Dec 31 '18 at 7:13
Nandita Arora SharmaNandita Arora Sharma
9,4832718
answered Dec 31 '18 at 7:13
Nandita Arora SharmaNandita Arora Sharma
9,4832718
answered Dec 31 '18 at 7:13
Nandita Arora SharmaNandita Arora Sharma
9,4832718
answered Dec 31 '18 at 7:13
Nandita Arora SharmaNandita Arora Sharma
9,4832718
9,4832718
Thanks, It's Correct and i have one more question like when i select any of the button the :focus animation should happen
– Devarsh Bhatt
Dec 31 '18 at 7:18
I dont think its possible with pure CSS,
– Nandita Arora Sharma
Dec 31 '18 at 7:22
Ok fine No Problem. Thanks for your help really appreciated
– Devarsh Bhatt
Dec 31 '18 at 7:25
add a comment |
Thanks, It's Correct and i have one more question like when i select any of the button the :focus animation should happen
– Devarsh Bhatt
Dec 31 '18 at 7:18
I dont think its possible with pure CSS,
– Nandita Arora Sharma
Dec 31 '18 at 7:22
Ok fine No Problem. Thanks for your help really appreciated
– Devarsh Bhatt
Dec 31 '18 at 7:25
Thanks, It's Correct and i have one more question like when i select any of the button the :focus animation should happen
– Devarsh Bhatt
Dec 31 '18 at 7:18
Thanks, It's Correct and i have one more question like when i select any of the button the :focus animation should happen
– Devarsh Bhatt
Dec 31 '18 at 7:18
I dont think its possible with pure CSS,
– Nandita Arora Sharma
Dec 31 '18 at 7:22
I dont think its possible with pure CSS,
– Nandita Arora Sharma
Dec 31 '18 at 7:22
Ok fine No Problem. Thanks for your help really appreciated
– Devarsh Bhatt
Dec 31 '18 at 7:25
Ok fine No Problem. Thanks for your help really appreciated
– Devarsh Bhatt
Dec 31 '18 at 7:25
add a comment |
0
I guess you can try something like give the display: flex property to the legend tag (in case you want the labels in a line too). It will look something like this:
legend {
display: flex;
justify-content: space-evenly;
align-items: center;
}
Of course you can assign a class instead of styling the tag.
More on flex-box can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Dec 31 '18 at 7:14
Sagi RikaSagi Rika
1519
add a comment |
0
I guess you can try something like give the display: flex property to the legend tag (in case you want the labels in a line too). It will look something like this:
legend {
display: flex;
justify-content: space-evenly;
align-items: center;
}
Of course you can assign a class instead of styling the tag.
More on flex-box can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Dec 31 '18 at 7:14
Sagi RikaSagi Rika
1519
add a comment |
0
0
0
I guess you can try something like give the display: flex property to the legend tag (in case you want the labels in a line too). It will look something like this:
legend {
display: flex;
justify-content: space-evenly;
align-items: center;
}
Of course you can assign a class instead of styling the tag.
More on flex-box can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Dec 31 '18 at 7:14
Sagi RikaSagi Rika
1519
I guess you can try something like give the display: flex property to the legend tag (in case you want the labels in a line too). It will look something like this:
legend {
display: flex;
justify-content: space-evenly;
align-items: center;
}
Of course you can assign a class instead of styling the tag.
More on flex-box can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Dec 31 '18 at 7:14
Sagi RikaSagi Rika
1519
answered Dec 31 '18 at 7:14
Sagi RikaSagi Rika
1519
answered Dec 31 '18 at 7:14
Sagi RikaSagi Rika
1519
answered Dec 31 '18 at 7:14
Sagi RikaSagi Rika
1519
1519
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53984591%2fhow-can-i-align-radio-button-with-label-legend-and-fieldset-in-one-single-line%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You want all of them in one line ? or the radio button and label in one line then next radio and label in next line ?
– Nandita Arora Sharma
Dec 31 '18 at 7:09
I want it like Gender then in next line all the radio buttons & the radio button should be in same line
– Devarsh Bhatt
Dec 31 '18 at 7:13
Added an answer, please check if it works for you
– Nandita Arora Sharma
Dec 31 '18 at 7:14