I have a javascript validation plugin which is used in too many places to replace. It inserts a label after the input it is validating. Current unvalidated mark up & image below:
Would have loved to show images but I guess I can't yet.
<div id="gender-select">
<label id="gender">Gender</label>
<input class="male required radioBtn gender-hide" type="radio" name="gender" value="1" id="male">
<label for="male"></label>
<input class="female required radioBtn gender-hide" type="radio" name="gender" value="2" id="female">
<label for="female"></label>
</div>
This is the code after the validation is run and the input for gender is invalid.
<div id="gender-select">
<label id="gender">Gender</label>
<input class="male required radioBtn gender-hide error" type="radio" name="gender" value="1" id="male">
<label for="gender" generated="true" class="error">Mandatory</label>
<label for="male"></label>
<input class="female required radioBtn gender-hide error" type="radio" name="gender" value="2" id="female">
<label for="female"></label>
</div>
Current CSS
#join-page #form-content input[type="radio"] {
position: absolute;
left: -8000px;
}
#join-page #form-content input {
background: #f4f4f4;
height: 40px;
border: none;
padding: 0 2%;
width: 100%;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
font-size: 16px;
color: #a2a2a2;
}
#join-page #form-content input[type="radio"] + label {
background: url('/App_Presentation/responsive/OpinionMilesClub/img/omc-genderRadio.png') 0px 0px no-repeat;
cursor: pointer;
height: 40px;
width: 30px;
}
#join-page #form-content label.error[for="gender"] {
position: absolute;
top: -11px;
left: 0px;
}
#join-page #form-content input[type="radio"] + label[for="female"] {
margin-left: -4px;
background: url('/App_Presentation/responsive/OpinionMilesClub/img/omc-genderRadio.png') 31px 0px;
}
I don't understand why the label still takes up space? Anyone have any idea...
Related
Good day all. I am currently doing a form in html and css. I tried researching on the internet but somehow the code there is would either cause my textbox to lose its design and look plain or it would be very ugly.
I am trying to align the textbox with the labels so that it would look neat.
I also want to make the submit and reset button align in the center next to each other.
And the radio buttons to make them in a straight line instead of being seperated on 2 lines.
When I removed the code for the class .firstform select, type, I lose my design properties for the textboxes but the buttons managed to be align.
body {
background: url(ewp.jpg);
background-size: cover;
}
.firstform {
order-radius: 5px;
background: green;
padding: 20px;
width: 550px;
margin: auto;
color: #fff;
font-size: 16px;
font-family: verdana;
margin-top: 100px;
opacity: 0.8;
}
.firstform h1 {
text-align: center;
margin: 0;
padding: 0;
}
.firstform input,
select {
width: 50%;
padding: 12px 20px;
margin-left: 16em;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
background: black;
color: white;
opacity: 0.9;
}
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
margin-left: 24em;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide browser default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 15px;
width: 15px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196f3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 6px;
left: 6px;
width: 4px;
height: 4px;
border-radius: 50%;
background: white;
}
.buttonHolder {
display: block;
margin: 0 auto;
}
.firstform input[type="submit"]:hover {
background: #45a049;
transparent: 0.6s;
}
.firstform input[type="reset"]:hover {
background: #45a059;
transparent: 0.6s;
}
<div class="firstform">
<h1>Student Registration Form</h1>
<form action="Form1.php" method="post">
<p><label>First Name: <input type="text" name ="fname" placeholder="First Name" maxlength="25"></label></p>
<p><label>Last Name: <input type="text" name="lname" placeholder="Last Name" maxlength="25"></label></p>
<p><label>Age: <input type="number" name= "age" min="0" max="150"></label></p>
<p><label> Date of Birth:<input type="date" name="date"></label></p>
<p>Gender:
<label class="container">
<input type="radio" name="gender" value="Male">Male
<span class="checkmark"></span>
</label>
<label class="container">
<input type="radio" name="gender" value="Female">Female
<span class="checkmark"></span>
</label>
</p>
<p> Nationality:
<label>
<select name="nationality">
<option selected>Malaysia</option>
<option>Bangladesh</option>
<option>India</option>
<option>African Nations</option>
<option>South East Asia nations</option>
<option>others</option>
</select>
</label>
</p>
<p><label>Address:<input type="text" name="address" size="30" /></label></p>
<p><label>Postcode: <input type="number" name="postcode" min="0" maxlength="5" oninput="this.value=this.value.slice(0,this.maxLength)"></label></p>
<p><label>State:
<input name="state" list="state">
<datalist id="state">
<option value="Selangor">
<option value="Kuala Lumpur">
<option value="Kelantan">
<option value="Johor">
<option value="Malacca">
<option value="Perak">
<option value="Pahang">
<option value="Negeri Sembilan">
<option value="Sabah">
<option value="Sarawak">
<option value="Perlis">
<option value="Kedah">
<option value="Terengganu">
<option value="Penang">
</datalist>
</label></p>
<p>
<label>Email:
<input type="email" name="email">
</label>
</p>
<p>
<label> Tel:
<input type="tel" name="tel" placeholder="(###) ###-####" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="10">
</label>
</p>
<div class="buttonHolder">
<input type="submit" name="Insert">
<input type="reset" name="Clear">
</div>
</form>
</div>
Working fiddle: https://jsfiddle.net/jennifergoncalves/nut5mzgj/10/
body {
background: url(ewp.jpg);
background-size: cover;
}
.firstform {
order-radius: 5px;
background: green;
padding: 20px;
width: 550px;
margin: auto;
color: #fff;
font-size: 16px;
font-family: verdana;
margin-top: 100px;
opacity: 0.8;
}
.firstform h1 {
text-align: center;
margin: 0;
padding: 0;
}
.firstform input,
select {
width: 50%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
background: black;
color: white;
opacity: 0.9;
/* removed margin-left */
}
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
margin-left: 24em;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide browser default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 15px;
width: 15px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked~.checkmark {
background-color: #2196f3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked~.checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 6px;
left: 6px;
width: 4px;
height: 4px;
border-radius: 50%;
background: white;
}
.buttonHolder {
display: block;
margin: 0 auto;
}
.firstform input[type="submit"]:hover {
background: #45a049;
transparent: 0.6s;
}
.firstform input[type="reset"]:hover {
background: #45a059;
transparent: 0.6s;
}
label > span, p > span {
width: 50%;
display: inline-block;
}
<div class="firstform">
<h1>Student Registration Form</h1>
<form action="Form1.php" method="post">
<p><label><span>First Name: </span><input type="text" name ="fname" placeholder="First Name" maxlength="25"></label></p>
<p><label><span>Last Name: </span><input type="text" name="lname" placeholder="Last Name" maxlength="25"></label></p>
<p><label><span>Age: </span><input type="number" name= "age" min="0" max="150"></label></p>
<p><label><span>Date of Birth:</span><input type="date" name="date"></label></p>
<p><span>Gender:</span>
<label class="container">
<input type="radio" name="gender" value="Male">Male
<span class="checkmark"></span>
</label>
<label class="container">
<input type="radio" name="gender" value="Female">Female
<span class="checkmark"></span>
</label>
</p>
<p><label><span>Nationality:</span><select name="nationality">
<option selected>Malaysia</option>
<option>Bangladesh</option>
<option>India</option>
<option>African Nations</option>
<option>South East Asia nations</option>
<option>others</option>
</select>
</label>
</p>
<p><label><span>Address:</span><input type="text" name="address" size="30" /></label></p>
<p><label><span>Postcode: </span><input type="number" name="postcode" min="0" maxlength="5" oninput="this.value=this.value.slice(0,this.maxLength)"></label></p>
<p><label><span>State:</span><input name="state" list="state">
<datalist id="state">
<option value="Selangor">
<option value="Kuala Lumpur">
<option value="Kelantan">
<option value="Johor">
<option value="Malacca">
<option value="Perak">
<option value="Pahang">
<option value="Negeri Sembilan">
<option value="Sabah">
<option value="Sarawak">
<option value="Perlis">
<option value="Kedah">
<option value="Terengganu">
<option value="Penang">
</datalist>
</label></p>
<p>
<label><span>Email:</span><input type="email" name="email">
</label>
</p>
<p>
<label><span>Tel:</span><input type="tel" name="tel" placeholder="(###) ###-####" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="10">
</label>
</p>
<div class="buttonHolder">
<input type="submit" name="Insert"><input type="reset" name="Clear">
</div>
</form>
</div>
The issues were that you had a margin to the left of the inputs. This was preventing the elements from being inline because it added to the horizontal space needed.
Secondly, your inputs are inside your labels. This is fine practice since you can avoid using for attributes for accessibility. However, you can't target just the label, so I surrounded the actual label text with a span. Now you can just target the actual label text. Setting this to 50% and having the inputs at 50% with display:inline-block on both will solve this issue.
I suggest looking into flexbox for these kind of issues. It gives you the ability to be completely flexible about how you align your elements. Here you can find a good explanation:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
3 issues here, to fix the problem
You have enclosed the <input> inside the <label>. Move it out, close the </label> and then start the <input>
remove the margin-left of the input
give display: inline-block; width: 50%; to the label
So your code looks like this now:
jsfiddle: https://jsfiddle.net/vg3ts1m0/3/
jsfiddle (full screen): https://jsfiddle.net/vg3ts1m0/3/show
I have edited first few items in it. It will give you an idea on how to proceed.
I hope it helps.
I am trying to align the textbox with the labels so that it would look neat.
// Layout will resolve 90% of vertical alignment issues.
// To unify form controls (ex. `<input>`, `<select>`, etc) apply the following
input, select, label {display: inline-block; font: inherit}
I also want to make the submit and reset button align in the center next to each other.
/*
Wrap the buttons in a block element (ex. `<fieldset>`, `<div>`, etc)
and center the block
*/
fieldset {width: fit-content; margin: 0 auto}
<fieldset><input type='reset'><input type='submit'></fieldset>
And the radio buttons to make them in a straight line instead of being seperated on 2 lines.
/*
Dimensions should be adjusted as a square (ex. width:4vw; height:4vh;)
The following styles align everything vertically. Keep the height and
line-height the same.
*/
[type=radio] {height: 5vh; line-height: 5vh; vertical-align: middle}
Intrinsic lengths (vw and vh) are used to make the whole form so that it's responsive (see demo in full page mode.
Demo
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
font: 700 5vh/1.1 Verdana;
}
body {
overflow-x: hidden;
overflow-y: scroll;
}
form {
width: 100%;
height: 100%;
padding: 0;
margin: 0 auto;
}
fieldset {
padding: 5px;
margin: 1vh auto;
border-radius: 6px;
}
.set1>legend {
margin-bottom: -7px
}
legend {
margin-top: 10px;
}
legend+hr {
width: 30vw;
}
[type=radio] {
width: 4vw;
height: 4vh;
}
input,
select,
label {
display: inline-block;
font: inherit;
margin: 2vh 0 0 0;
height: 6vh;
line-height: 6vh;
vertical-align: middle;
padding: 1px 2px;
border-radius: 4px;
}
#first,
#last {
width: 77vw;
}
#dob {
width: 33vw
}
.set2 label {
min-width: 9vw;
}
.set3 label {
min-width: 10vw;
}
#male {
margin-left: 3vw;
}
label[for=nationality] {
width: 19vw
}
#nationality {
height: 8vh;
line-height 8vh;
}
#address {
width: 71vw;
}
#state {
width: 25vw;
}
#email {
width: 75vw;
}
[type=number],
[type=tel],
[type=date] {
font-family: Consolas;
font-size: 6vh
}
[type='reset'],
[type='submit'] {
width: 15vw;
height: 8vh;
cursor: pointer;
}
[type=submit] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
margin: 0 0 0 -3px;
padding: 0 0 2px 0;
}
[type=reset] {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
margin: 0 0 0 -3px;
padding: 0 0 2px 0;
}
.set4 {
padding: 4px;
width: fit-content;
margin: 0px auto;
}
hr {
margin-top: 8px;
}
<form id='main'>
<fieldset name='set1' class='set1 set'>
<legend>Student Registration</legend>
<hr>
<fieldset name='set2' class='set2 set'>
<legend>Personal Information</legend>
<label for='first'>First: </label>
<input id='first' name='first' type='text'><br>
<label for='last'>Last: </label>
<input id='last' name='last' type='text'><br>
<label for='dob'>DOB: </label>
<input id='dob' name='dob' type='date'>
<input id='male' name='gender' type='radio' value='male'><label for='male'> Male </label>
<input id='female' name='gender' type='radio' value='female'><label for='female'> Female</label> <br>
<label for='nationality'>Nationality: </label>
<select id='nationality' name='nationality'>
<option value=''>---------------------------</option>
<optgroup label='North America'>
<option value='US'>American</option>
<option value='CA'>Canadian</option>
<option value='MX'>Mexican</option>
</optgroup>
<optgroup label='South America'>
<option value='BR'>Brazilian</option>
<option value='CR'>Costa Rican</option>
<option value='PR'>Peruvian</option>
</optgroup>
<optgroup label='Asia'>
<option value='CN'>Chinese</option>
<option value='JP'>Japanese</option>
<option value='IN'>Indian</option>
</optgroup>
<optgroup label='Europe'>
<option value='GB'>British</option>
<option value='DE'>German</option>
<option value='FI'>Finnish</option>
</optgroup>
<optgroup label='Africa'>
<option value='NG'>Nigerian</option>
<option value='EG'>Egyptian</option>
<option value='ML'>Malian</option>
</optgroup>
<option value='AU'>Australian</option>
</select>
</fieldset>
<hr>
<fieldset name='set3' class='set3 set'>
<legend>Contact Information</legend>
<label for='address'>Address: </label>
<input id='address' name='address' type='text'><br>
<label for='state'>State: </label>
<input id='state' name='state' list='states'>
<datalist id="states">
<option value="California">
<option value="Oregon">
<option value="Washington">
<option value="Nevada">
<option value="Arizona">
</datalist>
<label for='zipcode'>Zip Code: </label>
<input id='zipcode' name='zipcode' type='number' min='85000' max='98999'><br>
<label for='email'>Email: </label>
<input id='email' name='email' type='email'><br>
<label for='tel'>Telephone: </label>
<input id='tel' name='tel' type='tel'>
</fieldset>
<fieldset name='set4' class='set4 set'>
<input type='submit'>
<input type='reset'>
</fieldset>
</fieldset>
</form>
I have requirement of radio buttons with on/off method i.e when click on one radio button it should on and when click on second button first button should off but below code is not working as per my expectation.
Here is the snippet for that html and css code:
body {
background: #0288D1;
}
.checkboxes-and-radios {
margin: 80px auto 0;
width: 280px;
padding: 30px;
background: #fafafa;
input {
display: none;
}
label {
cursor: pointer;
padding-right: 35px;
position: relative;
display: block;
font-size: 18px;
padding: 15px 0
}
input[type="checkbox"],
input[type="radio"] {
position: absolute;
visibility: hidden !important;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
&:before,
&:after {
content: '';
position: absolute;
top: 50%;
margin-top: -7.5px;
box-sizing: border-box;
}
&:before {
width: 30px;
height: 15px;
right: 0px;
background: #fff;
border: 1px solid #e4e3e1;
border-radius: 15px;
}
&:after {
width: 15px;
height: 15px;
right: 15px;
background: #BDBDBD;
border-radius: 50%;
transition: all 200ms ease-out;
}
}
input[type="checkbox"]:checked+label,
input[type="radio"]:checked+label {
&:after {
right: 0px;
background: #FF9800;
}
}
}
<div class="checkboxes-and-radios">
<h1>Radios:</h1>
<input type="radio" name="radio-cats" id="radio-1" value="1" checked>
<label for="radio-1">Radio Label 1</label>
<input type="radio" name="radio-cats" id="radio-2" value="2">
<label for="radio-2">Radio Label 2</label>
<input type="radio" name="radio-cats" id="radio-3" value="3" checked>
<label for="radio-3">Radio Label 3</label>
<h1>Checkboxes:</h1>
<input type="checkbox" name="checkbox-cats[]" id="checkbox-1" value="1" checked>
<label for="checkbox-1">Checkbox Label 1</label>
<input type="checkbox" name="checkbox-cats[]" id="checkbox-2" value="2">
<label for="checkbox-2">Checkbox Label 2</label>
<input type="checkbox" name="checkbox-cats[]" id="checkbox-3" value="3" checked>
<label for="checkbox-3">Checkbox Label 3</label>
</div>
expected output:
so how to add css that will look like in image shown in top?
Your code works like a charm for me. In your provided fiddle, the SCSS was not compiled to CSS. Here a compiled version. Radio buttons are switching correctly.
Here also a version on CodePen.
Your CSS is not CSS but SCSS, which has to be compiled to CSS.
You have to use a preprocessor to compile scss to css. You should start reading here:
http://sass-lang.com
body {
background: #0288D1;
}
.checkboxes-and-radios {
margin: 80px auto 0;
width: 280px;
padding: 30px;
background: #fafafa;
}
.checkboxes-and-radios input {
display: none;
}
.checkboxes-and-radios label {
cursor: pointer;
padding-right: 35px;
position: relative;
display: block;
font-size: 18px;
padding: 15px 0;
}
.checkboxes-and-radios input[type="checkbox"],
.checkboxes-and-radios input[type="radio"] {
position: absolute;
visibility: hidden !important;
}
.checkboxes-and-radios input[type="checkbox"]+label:before,
.checkboxes-and-radios input[type="checkbox"]+label:after,
.checkboxes-and-radios input[type="radio"]+label:before,
.checkboxes-and-radios input[type="radio"]+label:after {
content: '';
position: absolute;
top: 50%;
margin-top: -7.5px;
box-sizing: border-box;
}
.checkboxes-and-radios input[type="checkbox"]+label:before,
.checkboxes-and-radios input[type="radio"]+label:before {
width: 30px;
height: 15px;
right: 0px;
background: #fff;
border: 1px solid #e4e3e1;
border-radius: 15px;
}
.checkboxes-and-radios input[type="checkbox"]+label:after,
.checkboxes-and-radios input[type="radio"]+label:after {
width: 15px;
height: 15px;
right: 15px;
background: #BDBDBD;
border-radius: 50%;
transition: all 200ms ease-out;
}
.checkboxes-and-radios input[type="checkbox"]:checked+label:after,
.checkboxes-and-radios input[type="radio"]:checked+label:after {
right: 0px;
background: #FF9800;
}
<div class="checkboxes-and-radios">
<h1>Radios:</h1>
<input type="radio" name="radio-cats" id="radio-1" value="1" checked>
<label for="radio-1">Radio Label 1</label>
<input type="radio" name="radio-cats" id="radio-2" value="2">
<label for="radio-2">Radio Label 2</label>
<input type="radio" name="radio-cats" id="radio-3" value="3" checked>
<label for="radio-3">Radio Label 3</label>
<h1>Checkboxes:</h1>
<input type="checkbox" name="checkbox-cats1" id="checkbox-1" value="1" checked>
<label for="checkbox-1">Checkbox Label 1</label>
<input type="checkbox" name="checkbox-cats2" id="checkbox-2" value="2">
<label for="checkbox-2">Checkbox Label 2</label>
<input type="checkbox" name="checkbox-cats3" id="checkbox-3" value="3" checked>
<label for="checkbox-3">Checkbox Label 3</label>
</div>
I can not find out why I cannot align following in the center. The classes do not include a specified position, except for the .c class and the specialized container div(not in CSS), which only has an influence on the amount part, but is supposed to align everything in the center of this div. I write with AngularJs, so maybe there is another way to align everything better? maybe with a box-align? Or does it have something to do with the labels/spans?
#spread {
background-color: #0BD44A;
padding: 15px;
margin: 15px;
border-radius: 8px;
}
.c {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
}
/* Hide the browser's default radio button */
.c input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #BEBEBE;
border-radius: 8px;
}
/* On mouse-over, add a grey background color */
.c:hover input~.checkmark {
background-color: #F5F5F5;
}
/* When the radio button is checked, add a blue background */
.c input:checked~.checkmark {
background-color: white;
}
<div id="spread">
<h1>Spread</h1>
<div class="container" align=center>
<h2>Answer following questions and find out how to diversify your capital:</h2>
<label for="amount">
<br>
<h4>Amount you plan to invest:</h4>
<input type="number" class="form-control" id="amount" style="text-align:center" placeholder="250.00$">
</label>
<hr>
<h4>Time-period:</h4>
<h5>
<label class="c">short
<input type="radio" name="radiotime" value="1">
<span class="checkmark"></span>
</label>
<label class="c">medium
<input type="radio" name="radiotime" value="2">
<span class="checkmark"></span>
</label>
<label class="c">long
<input type="radio" name="radiotime" value="3">
<span class="checkmark"></span>
</label>
</h5>
<hr>
<h4>Risk-level:</h4>
<h5>
<label class="c">high
<input type="radio" name="radiorisk" value="1">
<span class="checkmark"></span>
</label>
<label class="c">medium
<input type="radio" name="radiorisk" value="2">
<span class="checkmark"></span>
</label>
<label class="c">low
<input type="radio" name="radiorisk" value="3">
<span class="checkmark"></span>
</label>
</h5>
<app-chart></app-chart>
</div>
</div>
**
One way to do it is to add breaks between the radio buttons, and change their display from block to inline.
Added red background color for emphasis.
For example:
#spread {
background-color: #0BD44A;
padding: 15px;
margin: 15px;
border-radius: 8px;
}
.c {
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
}
.inlineRed {
display: inline;
background-color: red;
}
/* Hide the browser's default radio button */
.c input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #BEBEBE;
border-radius: 8px;
}
/* On mouse-over, add a grey background color */
.c:hover input~.checkmark {
background-color: #F5F5F5;
}
/* When the radio button is checked, add a blue background */
.c input:checked~.checkmark {
background-color: white;
}
<div id="spread">
<h1>Spread</h1>
<div class="container" align=center>
<h4>Risk-level:</h4>
<h5>
<label class="c inlineRed">high
<input type="radio" name="radiorisk" value="1">
<span class="checkmark"></span>
</label>
<br>
<label class="c inlineRed">medium
<input type="radio" name="radiorisk" value="2">
<span class="checkmark"></span>
</label>
<br>
<label class="c inlineRed">low
<input type="radio" name="radiorisk" value="3">
<span class="checkmark"></span>
</label>
</h5>
<app-chart></app-chart>
</div>
</div>
Another way to achieve this is once again include br tags between the radio buttons, and add a style to the element that is wrapping the radio buttons, in this case, the h5. Make that style align the text left, then declare its width and add padding-left to the element.
Example, with blue-border for emphasis:
#spread {
background-color: #0BD44A;
padding: 15px;
margin: 15px;
border-radius: 8px;
}
.blue-border {
border: 3px solid blue;
text-align: left;
width: 50%;
padding-left: 25%;
}
.c {
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
}
/* Hide the browser's default radio button */
.c input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #BEBEBE;
border-radius: 8px;
}
/* On mouse-over, add a grey background color */
.c:hover input~.checkmark {
background-color: #F5F5F5;
}
/* When the radio button is checked, add a blue background */
.c input:checked~.checkmark {
background-color: white;
}
<div id="spread">
<h1>Spread</h1>
<div class="container" align=center>
<h4>Risk-level:</h4>
<h5 class="blue-border">
<label class="c inlineRed">high
<input type="radio" name="radiorisk" value="1">
<span class="checkmark"></span>
</label>
<br>
<label class="c inlineRed">medium
<input type="radio" name="radiorisk" value="2">
<span class="checkmark"></span>
</label>
<br>
<label class="c inlineRed">low
<input type="radio" name="radiorisk" value="3">
<span class="checkmark"></span>
</label>
</h5>
<app-chart></app-chart>
</div>
</div>
This question already has answers here:
CSS - How to Style a Selected Radio Buttons Label?
(8 answers)
Closed 4 years ago.
I have already looked on here at how to style the input buttons I found some good answers but for some reason I can not style the inside of the button when checked. Take a look at my code maybe I did something wrong
.radio input[type='radio'] {
display: none; /*removes original button*/
}
.radio label:before { /*styles outer circle*/
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid orange;
background-color: transparent;
}
.radio label input[type='radio']:checked + label:after { /*styles inside circle*/
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 9px;
left: 10px;
content: " ";
display: block;
background-color: blue;
}
<div class="radio">
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
<label><input type="radio" name="gender" value="other"> Other</label>
</div>
You can't go backwards in css, thats why your code doesn't work
You need to add a span inside the label after your input and you can style it when the radio is checked
see code snippet:
.radio input[type='radio'] {
display: none;
/*removes original button*/
}
.radio label:before {
/*styles outer circle*/
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid orange;
background-color: transparent;
}
.radio label {
position: relative;
}
.radio label input[type='radio']:checked+span {
/*styles inside circle*/
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 1px;
left: 6px;
display: block;
background-color: blue;
}
<div class="radio">
<label><input type="radio" name="gender" value="male"> Male<span></span></label>
<label><input type="radio" name="gender" value="female"> Female<span></span></label>
<label><input type="radio" name="gender" value="other"> Other<span></span></label>
</div>
Please see below.
I have put the label behind the input field and redefined the CSS for label:before when the button is checked.
You had the input field as a child of the label but in the CSS it was approached as a sibling.
input[type='radio'] {
display: none;
}
label:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid orange;
background-color: transparent;
}
input[type='radio']:checked+label:before {
position: relative;
border: 2px solid orange;
border-radius: 11px;
width: 20px;
height: 20px;
top: 5px;
content: " ";
display: inline-block;
background-color: blue;
}
<div class="radio">
<input id="male" type="radio" name="gender" value="male">
<label for="male">Male</label>
<input id="female" type="radio" name="gender" value="female">
<label for="female">Female</label>
<input id="other" type="radio" name="gender" value="other">
<label for="other">Other</label>
</div>
So your selector is incorrect and so is your html structure. You need to move your labels after your inputs (and target the input using a for attribute on the label and id on the input), then remove the first label from your selector
I have commented the css I have changed below
.radio input[type='radio'] {
display: none; /*removes original button*/
}
.radio label { /* add this so dot is relative to the label */
position: relative;
display: inline-block;
}
.radio label:before { /*styles outer circle*/
content: " ";
display: inline-block;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid orange;
background-color: transparent;
vertical-align:middle; /* add this so text is vertically centred next to ring */
}
/* remove the first label from this selector */
.radio input[type='radio']:checked + label:after { /*styles inside circle*/
border-radius: 50%;
width: 12px;
height: 12px;
position: absolute;
top: 6px; /* I have changed the top and left so this is in the centre */
left: 6px;
content: " ";
display: block;
background-color: blue;
}
<div class="radio">
<input type="radio" name="gender" value="male" id="male"><label for="male">Male</label>
<input type="radio" name="gender" value="female" id="female"><label for="female"> Female</label>
<input type="radio" name="gender" value="other" id="other"><label for="other"> Other</label>
</div>
I am currently working on creating a sign up form html/css. I realised that different browsers work differently on the width of inputs. How can i rectify this issue and make sure that my sign up form is compatible with all browsers. My sign up form works perfectly for chrome as it is where i do coding on.
ul {
background-color: #000000;
}
li a:hover {
background-color: #0cf72a;
}
.word-container {
width: 500px;
height: 50px;
margin: auto;
position: relative;
top: 80px;
}
.word-container h1 {
margin: 0;
text-align: center;
color: #ab0a0a;
}
.register-container {
width: 600px;
height: 350px;
margin: auto;
position: relative;
top: 100px;
border: 1px solid #000;
}
.fname input[type="text"] {
position: relative;
left: 115px;
top: 30px;
padding: 8px;
}
.lname input[type="text"] {
position: relative;
left: 314px;
top: -5.5px;
padding: 8px;
}
.userid input[type="text"] {
position: relative;
left: 115px;
padding: 8px;
top: 10px;
}
.pwd input[type="password"] {
position: relative;
padding: 8px;
left: 115px;
top: 25px;
}
.email input[type="email"] {
position: relative;
padding: 8px;
left: 115px;
top: 40px;
}
.btn button[type="submit"] {
position: relative;
left: 115px;
top: 55px;
padding: 8px;
width: 382px;
border: 1px solid #000000;
color: #ffffff;
background-color: #ab0a0a;
}
div.btn button[type="submit"]:hover {
background-color: rgb(255, 0, 0);
}
<div class="word-container">
<h1>Create your account</h1>
</div>
<div class="register-container">
<form action="" method="POST">
<div class="fname">
<label>
<input type="text" placeholder="First Name" name="fname" size="20">
</label>
</div>
<div class="lname">
<label>
<input type="text" placeholder="Last Name" name="lname" size="20">
</label>
</div>
<div class="userid">
<label>
<input type="text" placeholder="Username" name="userid" size="50">
</label>
</div>
<div class="pwd">
<label>
<input type="password" placeholder="Password" name="pwd" size="50">
</label>
</div>
<div class="email">
<label>
<input type="email" placeholder="Email Address" name="email" size="50">
</label>
</div>
<div class="btn">
<button type="submit">Create Account</button>
</div>
</form>
</div>
It's always a good idea to use something like normalize.css or any other CSS reset code (eric meyer css reset is very popular too) to reset CSS across all browsers.
Any browser come with it's defaults values for padding's,margins,widths, heights etc...
I guess it won't be an 100% solution but it will defiantly will take you closer to what you're looking for.
Do not jump to position relative and absolute. If you are new to all this, I can understand it seems the most natural way to go about positioning elements; just using a top and left position and that's that. But this is not how you should do it on the web!
Below you can find how I would do it.
Matan G. is right in pointing out that a CSS reset/normalize is often used, and I do so myself as well. However, before you do that (and considering you're new) it would be wise to take a look at the code that I posted and see if it makes any sense to you. If not, ask.
It is important to note that you should avoid these things when possible:
setting a fixed width to text items such as headings, paragraphs, lists.
using relative/absolute positioning. They are very useful but only when necessary.
using too many divs/classes than actually needed. Don't overcrowd your HTML.
* {box-sizing: border-box;}
ul {
background-color: #000000;
}
li a:hover {
background-color: #0cf72a;
}
.word-container {
width: 500px;
height: 50px;
margin: 80px auto auto;
}
.word-container h1 {
margin: 0;
text-align: center;
color: #ab0a0a;
}
.register-container {
width: 600px;
margin: 20px auto auto;
border: 1px solid #000;
padding: 20px;
}
label {
display: block;
}
.name::after {
content: "";
display: table;
clear: both;
}
.name label:first-child {
margin-right: 20px;
}
.name label {
width: calc(100% / 2 - 10px);
float: left;
}
input, [type="submit"] {
padding: 8px;
margin-bottom: 20px;
width: 100%;
}
[type="submit"] {
border: 1px solid #000000;
color: #ffffff;
background-color: #ab0a0a;
margin: 0;
}
[type="submit"]:hover {
background-color: red;
}
<div class="word-container">
<h1>Create your account</h1>
</div>
<div class="register-container">
<form action="" method="POST">
<div class="name">
<label>
<input type="text" placeholder="First Name" name="fname">
</label>
<label>
<input type="text" placeholder="Last Name" name="lname">
</label>
</div>
<label>
<input type="text" placeholder="Username" name="userid">
</label>
<label>
<input type="password" placeholder="Password" name="pwd">
</label>
<label>
<input type="email" placeholder="Email Address" name="email">
</label>
<button type="submit">Create Account</button>
</form>
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Forms</title>
<style>
.container{
width: 45%;
margin: auto;
}
.form-content{
margin: 40px;
}
.form-content input{
width: 100%;
}
label{
font-weight: bold;
}
input[type=text],[type=email],[type=tel],[type=date],[type=password]{
font-size: 16px;
border-radius: 5px;
background: #D9F1F7;
border: #000000;
padding: 10px;
}
input[type=submit]{
background: #4C63ED;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
color: #fff;
cursor: pointer;
}
input[type=submit]:hover{
background: #330EEF;
font-weight: bold;
}
</style>
</head>
<body>
<div class = "container">
<form name="signup" method="get" action="">
<div class="form-content">
<label>First Name : </label>
<input type="text" name="firstname" />
</div>
<div class="form-content">
<label>Last Name : </label>
<input type="text" name="lastname" />
</div>
<div class="form-content">
<label>E-Mail : </label>
<input type="email" name="email" />
</div>
<div class="form-content">
<label>Telephone : </label>
<input type="tel" name="telephone" />
</div>
<div class="form-content">
<label>Date of Birth : </label>
<input type="date" name="dob" />
</div>
<div class="form-content">
<input type="submit" name="submit" value="Submit" />
</div>
</form>
</div>
</body>
</html>