I would like to replace the default view of radio buttons by customizing it. So, I would like to toggle between two images(as I am not good with css3 animations, so i chose to do the job with images).
So for check state I would like to display (check.png):
And when the radio button is unchecked I would like to display (uncheck.png):
HTML CODE:
currently I am using the following bootstrap markup:
<section class="lineHeight">
<div class="radio">
<label>
<input type="radio" name="auditTool" id="optionsRadios1" value="option1">
<span class="outer"><span class="inner"></span></span>Large
</label>
</div>
</section>
CSS:
.lineHeight{
line-height:56px;
}
.lineHeight .radio input[type=radio]{
position: absolute;
top: 50%;
margin-top: -6px;
margin-left: -20px;
}
You can hide the native radio and display a custom one with CSS.
input[type=radio] {
display: none;
}
input[type=radio] + label:before {
content: '';
display: inline-block;
border: 2px solid #0F81D5;
height: 12px;
width: 12px;
border-radius: 50%;
}
label:hover:before {
box-shadow: inset 0 0 5px orange;
}
input[type=radio]:checked + label:before {
border-width: 5px;
height: 6px;
width: 6px;
}
<div>
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Foo</label>
</div>
<div>
<input type="radio" name="radio" id="radio2" />
<label for="radio2">Bar</label>
</div>
<div>
<input type="radio" name="radio" id="radio3" />
<label for="radio3">Baz</label>
</div>
input[type=radio].css-checkbox {
position: absolute;
z-index: -1000;
left: -1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
input[type=radio].css-checkbox + label.css-label {
padding-left: 23px;
height: 18px;
display: inline-block;
line-height: 18px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 18px;
vertical-align: middle;
cursor: pointer;
}
input[type=radio].css-checkbox:checked + label.css-label {
background-position: 0 -18px;
}
label.css-label {
background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_67c83917465692304d237c7e9e0533ca.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS Checkbox Demo from CSSCheckbox.com</title>
<link rel="stylesheet" href="style.css" />
<style type="text/css">
/*this is just to organize the demo checkboxes*/
label {
margin-right: 20px;
}
</style>
</head>
<body>
<h1 style="margin:0; margin-top:10px; padding:0; padding-left:25px; padding-bottom:10px; font-family:sans-serif;">CSS Checkboxes!</h1>
<div style="background:#444; color:#fafafa; padding:10px;">
<h3>Dark Background</h3>
<table>
<tr>
<td>
<input type="radio" name="radiog_lite" id="radio1" class="css-checkbox" />
<label for="radio1" class="css-label radGroup1">Option 1</label>
</td>
<td>
<input type="radio" name="radiog_lite" id="radio2" class="css-checkbox" checked="checked" />
<label for="radio2" class="css-label radGroup1">Option 2</label>
</td>
<td>
<input type="radio" name="radiog_lite" id="radio3" class="css-checkbox" />
<label for="radio3" class="css-label radGroup1">Option 1</label>
</td>
</tr>
</table>
</div>
<div style="background:#fafafa; color:#222; padding:10px;">
<h3>Light Background</h3>
<table>
<tr>
<td>
<input type="radio" name="radiog_dark" id="radio4" class="css-checkbox" />
<label for="radio4" class="css-label radGroup2">Option 1</label>
</td>
<td>
<input type="radio" name="radiog_dark" id="radio5" class="css-checkbox" checked="checked" />
<label for="radio5" class="css-label radGroup2">Option 2</label>
</td>
<td>
<input type="radio" name="radiog_dark" id="radio6" class="css-checkbox" />
<label for="radio6" class="css-label radGroup2">Option 1</label>
</td>
</tr>
</table>
</div>
<p style="padding-left:25px;">Radio Button generated by CSS Checkbox
</p>
</body>
</html>
Reference: http://www.csscheckbox.com/radio-buttons/0/
Related
I have been using a custom check box for my project. there are 5 checkboxes in a line. but in the standard view, it only shows 4 checkboxes. but when I zoomed out it will show the missing checkbox. how can I overcome this?
HTML:
<div className="checkbox-container-05">
<input id='CP5' name='3565' type='checkbox' onChange={(e)=>seatNohandleChecked(e)} className='pit-2' />
<label htmlFor='CP5' className='btn'>CP5</label>
<input id='CP6' name='3565' type='checkbox' onChange={(e)=>seatNohandleChecked(e)} className='pit-2' />
<label htmlFor='CP6' className='btn'>CP6</label>
<input id='CP7' name='3565' type='checkbox' onChange={(e)=>seatNohandleChecked(e)} className='pit-2' />
<label htmlFor='CP7' className='btn'>CP7</label>
<input id='CP8' name='3565' type='checkbox' onChange={(e)=>seatNohandleChecked(e)} className='pit-2' />
<label htmlFor='CP8' className='btn'>CP8</label>
<input id='CP9' name='3565' type='checkbox' onChange={(e)=>seatNohandleChecked(e)} className='pit-2' />
<label htmlFor='CP9' className='btn'>CP9</label>
<input id='CP10' name='3565' type='checkbox' onChange={(e)=>seatNohandleChecked(e)} className='pit-2' />
<label htmlFor='CP10' className='btn'>CP10</label>
</div>
CSS:
.checkbox-container-05 {
display: contents;
flex-direction: row;
}
.pit-2 {
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background: url(../images/event_seats_plan/freddy/pit.png);
background-size: cover;
border-radius: 1px;
box-sizing: border-box;
position: relative;
box-sizing: content-box;
width: 60px;
height: 45px;
border-width: 0;
transition: all .3s linear;
text-align: center;
right: 640px;
bottom: 740px;
display: flex;
}
Zoomed out
Normal view
I want this form fields just like the red line in this picture https://i.stack.imgur.com/gbvDs.png
input,
select,
textarea {
width: 20%;
padding: 12px;
border: 1px solid #ccc;
box-sizing: border-box;
margin-left: 20px;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
.container {
/* the form is inside this container */
padding: 20px;
margin: 20px;
overflow: auto;
text-align: center;
}
<div class="container">
<form method="post" enctype="multipart/form-data" id="form">
<label for="id_image1">profile picture</label>
<input type="file" name="image1" accept="image/*" required id="id_image1" />
<label for="id_image2">cover picture</label>
<input type="file" name="image2" accept="image/*" required id="id_image2" />
<label for="id_tag">Name:</label> <input type="text" name="tag" maxlength="50" required id="id_tag" />
<button type="submit" class="button">Upload</button>
</form>
</div>
You can accomplish this with CSS Grid and a little padding.
.wrap,
.field-container {
display: inline-grid;
}
.field-container {
grid-template-columns: 1fr auto;
padding-bottom: 0.5rem;
}
.field-container label {
padding-right: 2rem;
text-align: right;
}
<div class="wrap">
<div class="field-container">
<label for="profilePic">Profile picture</label>
<input type="text" id="profilePic">
</div>
<div class="field-container">
<label for="coverPic">Cover picture</label>
<input type="text" id="coverPic">
</div>
<div class="field-container">
<label for="name">Name</label>
<input type="text" id="name">
</div>
</div>
jsFiddle
I changed your code this way, please check if it is suits what you desire:
<div class="container">
<form method="post" enctype="multipart/form-data" id="form">
<div class="rows">
<div class="column">
<label for="id_image1">profile picture</label>
<input type="file" name="image1" accept="image/*" required id="id_image1" />
</div>
<div class="column">
<label for="id_image2">cover picture</label>
<input type="file" name="image2" accept="image/*" required id="id_image2" />
</div>
<div class="column">
<label for="id_tag">Name:</label> <input type="text" name="tag" maxlength="50" required id="id_tag" />
<button type="submit" class="button">Upload</button>
</div>
</div>
</form>
</div>
<style>
input,
select,
textarea {
width: 55%;
padding: 12px;
border: 1px solid #ccc;
box-sizing: border-box;
margin-left: 20px;
}
label {
width:30%;
float:left;
}
#form{
width:100%;
}
.container {
width:40%;
margin:auto;
}
.rows{
width:100%;
display:block;
}
.column{
width:100%;
display:inline-block;
}
</style>
I have the following form:
body {
background: #fff;
color: 404040
}
form {
display: block;
position: relative;
width: 80%;
background: #f9f9f9;
margin: 10px auto;
padding: 30px;
}
label {
display: block;
position: relative;
top: -20px;
left: 0px;
color: #999;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
z-index: 1;
transition: all 0.3s ease-out;
}
input,
input:optional {
display: block;
position: relative;
background: none;
border: none;
border-bottom: 1px solid #ddd;
width: 100%;
font-family: 'Helvetica', sans-serif;
font-weight: bold;
font-size: 16px;
z-index: 2;
}
input:focus,
input:valid {
outline: none;
border-bottom: 1px solid #00aced;
}
input:focus+label,
input:required:valid+label {
top: -40px;
font-size: 11px;
color: #00aced;
}
.divider {
position: relative;
height: 30px;
width: auto;
background: none;
}
#hex1 {
width: 75px;
margin: 10px auto;
}
.headline {
margin-left: 100px;
font-size: 24px;
}
.submitBtn {
width: 250px;
height: 75px;
border-radius: 3px;
background: #37afac;
margin: 0 auto;
color: #fff
}
#title {
margin-top: -60px;
margin-left: 80px;
margin-bottom: 20px;
}
<form>
<h3>Details about the person you are reporting:</h3>
<div class='divider'></div>
<input type="text" name="firstname" required autocomplete="off" />
<label for="firstname">First Name</label>
<div class='divider'></div>
<input type="text" name="lastname" required autocomplete="off" />
<label for="lastname">Last Name</label>
<div class='divider'></div>
<input type="text" name="age" class="test" autocomplete="off" />
<label for="age">Age</label>
<div class='divider'></div>
<input type="text" name="gender" required autocomplete="off" />
<label for="gender">Gender</label>
<div class='divider'></div>
<input type="text" name="address 1" autocomplete="off" />
<label for="address1">Address 1</label>
<div class='divider'></div>
<input type="text" name="address 2" autocomplete="off" />
<label for="address2">Address 2</label>
<div class='divider'></div>
<input type="text" name="city" required autocomplete="off" />
<label for="city">City</label>
<div class='divider'></div>
<input type="text" name="state" required autocomplete="off" />
<label for="state">State</label>
<div class='divider'></div>
<input type="text" name="position" autocomplete="off" />
<label for="Position">Position (coach, referee, etc)</label>
<div class='divider'></div>
<input type="text" name="program" required autocomplete="off" />
<label for="Program">Program where individual works</label>
<div class='divider'></div>
<input type="text" name="IncidentDescription" required autocomplete="off" />
<label for="IncidentDescription">Incident description</label>
<div class='divider'></div>
<input type="text" name="IncidentLocation" required autocomplete="off" />
<label for="IncidentLocation">Incident location</label>
<div class='divider'></div>
Codepen: https://codepen.io/anon/pen/PazrBw
As each input receives focus, it animates via receiving a class in css. Using basic html5 validation, it's supposed to retain that class to show that it's been properly filled out.
My problem is that I need some fields to be not required. When fields are not marked required, the form automatically applies some of the :valid pseudoclass (the blue underline). The even bigger issue is that when it loses focus, it loses that class and collapses the label back down onto the input text.
What am I missing here? thank you!
You are not missing anything, it all behaves the way it's supposed to be based on your code. So you need an alternative approach.
I suggest using :placeholder-shown selector instead of :valid. This way, empty optional fields will no longer get selected.
To make this work, you first need to add placeholder=" " to your inputs. This feels a bit hacky because this way you are losing the ability to use placeholders in case you need them but remember that you are already saying no to using placeholders by putting labels in their place (well, if you ever need to include placeholders for the sake of accessibility, do it, and instead of empty placeholders put real ones, then hide them with CSS. Another topic, another time).
:placeholder-shown does not have IE/old browser support so we'll go with a good example of progressive enhancement here:
Label text will be already minimised and positioned on top of the input as a default (that is top: -40px; font-size: 11px;) so that it does not mess with user input. I believe that is good enough for IE/old browsers.
Then we add the nice animation effect for browsers that do support :placeholder-shown by including following styles:
input:not(:focus):placeholder-shown + label {
top: -20px;
font-size: 16px;
}
:not(:focus) is necessary to resize and reposition label as soon as user focuses an input because some browsers show placeholder even after focus (and hide it only after user starts typing).
body {
background: #fff;
color: 404040
}
form {
display: block;
position: relative;
width: 80%;
background: #f9f9f9;
margin: 10px auto;
padding: 30px;
}
label {
display: block;
position: relative;
/* top: -20px; */
top: -40px;
left: 0px;
color: #999;
font-family: 'Helvetica', sans-serif;
/* font-size: 16px; */
font-size: 11px;
z-index: 1;
transition: all 0.3s ease-out;
}
input/*,
input:optional */ {
display: block;
position: relative;
background: none;
border: none;
border-bottom: 1px solid #ddd;
width: 100%;
font-family: 'Helvetica', sans-serif;
font-weight: bold;
font-size: 16px;
z-index: 2;
}
input:focus/*,
input:valid*/ {
outline: none;
border-bottom: 1px solid #00aced;
}
input:focus+label/*,
input:required:valid+label*/ {
color: #00aced;
}
/* New styles >> */
input:not(:focus):placeholder-shown + label {
top: -20px;
font-size: 16px;
}
/* << */
.divider {
position: relative;
height: 30px;
width: auto;
background: none;
}
#hex1 {
width: 75px;
margin: 10px auto;
}
.headline {
margin-left: 100px;
font-size: 24px;
}
.submitBtn {
width: 250px;
height: 75px;
border-radius: 3px;
background: #37afac;
margin: 0 auto;
color: #fff
}
#title {
margin-top: -60px;
margin-left: 80px;
margin-bottom: 20px;
}
<form>
<h3>Details about the person you are reporting:</h3>
<div class='divider'></div>
<input placeholder=" " type="text" name="firstname" required autocomplete="off" />
<label for="firstname">First Name</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="lastname" required autocomplete="off" />
<label for="lastname">Last Name</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="age" class="test" autocomplete="off" />
<label for="age">Age</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="gender" required autocomplete="off" />
<label for="gender">Gender</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="address 1" autocomplete="off" />
<label for="address1">Address 1</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="address 2" autocomplete="off" />
<label for="address2">Address 2</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="city" required autocomplete="off" />
<label for="city">City</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="state" required autocomplete="off" />
<label for="state">State</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="position" autocomplete="off" />
<label for="Position">Position (coach, referee, etc)</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="program" required autocomplete="off" />
<label for="Program">Program where individual works</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="IncidentDescription" required autocomplete="off" />
<label for="IncidentDescription">Incident description</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="IncidentLocation" required autocomplete="off" />
<label for="IncidentLocation">Incident location</label>
<div class='divider'></div>
CSS only, I prefer not to add any additional JS. The 2nd radio button is not being "checked" when clicked.
Here's fiddle already created.
HTML:
<div class="account-container">
<div class="form-group">
<div class="control-container clearfix">
<div class="col-md-4 radio">
<input type="radio" name="Gender" value="Mujer" checked />
<label>Mujer</label>
</div>
<div class="col-md-4 radio">
<input type="radio" name="Gender" value="Hombre" />
<label>Hombre</label>
</div>
</div>
</div>
</div>
CSS:
.account-container .radio {
height: 100%;
margin: 0;
}
.account-container .radio label {
position: relative;
line-height: 40px;
cursor: pointer;
padding-left: 30px;
}
.account-container .radio label:before {
content: " ";
display: inline-block;
width: 22px;
height: 22px;
position: absolute;
left: 0;
top: 9px;
border: 1px solid #1fb5e1;
background-color: #fff;
border-radius: 50%;
}
.account-container .radio input[type="radio"]:checked + label:after {
background-color: #1fb5e1;
width: 14px;
height: 14px;
border-radius: 50%;
position: absolute;
content: " ";
left: 5px;
top: 14px;
}
<input type="radio" id="id_of_radio">
<label for="id_of_radio">
The issue is the position of your radio items, since they are not visible, you cannot click on it.
You should use the capability of the label, when you click on it, the bounded element is selected.
http://jsfiddle.net/fvzegu6o/1/
<div class="col-md-4 radio">
<input type="radio" name="Gender" value="Mujer" id="mujer" checked />
<label for="mujer">Mujer</label>
</div>
<div class="col-md-4 radio">
<input type="radio" name="Gender" value="Hombre" id="hombre" />
<label for="hombre">Hombre </label>
</div>
I'm currently having a problem with CSS styles in Webkit browswers (Chrome 4.0.249.89 & safari 4.0.4) in which I have a modal window that has a list of labels, radio buttons and some more text describing the what each radio button does. The modal displays correctly in FF 3.5.7
Here's the html for inside the modal,
<div id="rta_top">
<img src="pb_close_off.png" width="17" height="15" alt="Close this window" title="Close this window" id="rta_close" />
<h2 class="rta">Report</h2>
</div>
<div id="pb_bottom">
<div id="error_holder">
<div id="error"></div>
</div>
<br />
Please choose a reason for reporting this ad:
<form action="submit.php" method="post" id="report_form">
<fieldset>
<br />
<label for="incorrect_address">Wrong Address:</label>
<div class="report_ad_radio">
<input type="radio" id="incorrect_address" name="description" value="1" />
</div>
<div class="report_ad_text">
<label for="incorrect_address"> (Ad has wrong address).</label>
</div>
<br />
<label for="duplicate">Duplicate:</label>
<div class="report_ad_radio">
<input type="radio" id="duplicate" name="description" value="2" />
</div>
<div class="report_ad_text">
<label for="duplicate"> (Identical to another ad on-site).</label>
</div>
<br />
<label for="mis_classified">Mis-Classified:</label>
<div class="report_ad_radio">
<input type="radio" id="mis_classified" name="description" value="3" />
</div>
<div class="report_ad_text">
<label for="mis_classified"> (Ad is in the wrong section).</label>
</div>
<br />
<label for="inaccurate">Inaccurate:</label>
<div class="report_ad_radio">
<input type="radio" id="inaccurate" name="description" value="4" />
</div>
<div class="report_ad_text">
<label for="inaccurate"> (No longer available / price changed).</label>
</div>
<br />
<label for="photos">Photo Issue:</label>
<div class="report_ad_radio">
<input type="radio" id="photos" name="description" value="5" />
</div>
<div class="report_ad_text">
<label for="photos"> (Photos are inappropriate or do not belong to this ad).</label>
</div>
<br />
<label for="spam">Spam:</label>
<div class="report_ad_radio">
<input type="radio" id="spam" name="description" value="6" />
</div>
<div class="report_ad_text">
<label for="spam"> (Ad is spam/scam and is not exclusive).</label>
</div>
<br />
<label for="other">Other:</label>
<div class="report_ad_radio">
<input type="radio" id="other" name="description" value="7" />
</div>
<div class="report_ad_text">
<label for="other"> (Other reason, please specify).</label>
</div>
<br />
<br />
<label for="more_info">More Info:</label>
<textarea id="information" name="information"></textarea>
<br />
<br />
<div id="sending">
<div id="loader"></div>
<input type="hidden" name="submit_report_ad" value="1" />
<input type="image" src="/i/button_send_off.png" id="reply_button" name="submit_reply" value="Send ยป" />
</div>
</fieldset>
</div>
</div>
and the css for each element:
#rta_background {
padding: 10px;
background: url(/i/bg_modal_ra.png) no-repeat;
}
#ra_background_sent{
padding: 10px;
background: url(/i/bg_modal_ra_sent.png) no-repeat;
}
#rta_top {
padding: 0 8px 0 18px;
background: #355eae url(/i/bg_linkbar_off.png) repeat-x;
height: 30px;
line-height: 30px;
}
#rta_top h2 {
overflow: hidden;
width: 495px;
height: 30px;
font-size: 14px;
color: #fff;
}
#rta_close {
margin: 7px 0 0;
float: right;
}
#rta #pb_bottom fieldset {
background: #dff;
}
.report_ad_radio {
padding: 5px 0 0 5px;
float: left;
}
#rta #pb_bottom .rta_warning {
margin: 0 auto 6px;
border: 1px solid #f00;
padding: 2px 0;
width: 80%;
height: 15px;
line-height: 15px;
font-size: 12px;
font-weight: bold;
color: #000;
text-align: center;
background: #fdd;
}
#rta #pb_bottom .report_ad_text {
white-space: nowrap;
}
#rta #pb_bottom .report_ad_text label {
margin: 0;
padding: 10px 0 0 0;
width: auto;
font-size: 12px;
font-weight: normal;
cursor: pointer;
background: #00f000;
}
#information {
margin: 5px 0 0 5px;
padding: 2px 2px 2px 2px;
width: 370px;
height: 76px;
border: 1px solid #ccc;
color: #888;
line-height: 1.4;
resize: none;
}
#sending {
float:right;
margin-right: 24px;
}
#pb_bottom #error {
margin: 0 20px 0 50px;
height: 20px;
width: 420px;
}
#loader {
margin-right: 20px;
margin-top: 6px;
float:left;
}
In Safari it looks like this:
Safari http://neilcremins.com/img_dump/modal-saf.png
In Firefox it looks like this:
Firefox http://neilcremins.com/img_dump/modal-ff.png
Wow. Div-soup with everything defined in absolute measures. I don't know where to start. I know, I'll start here: you can only have one label per input, so... let's try this:
HTML:
<label><span class="intro">Wrong address</span><input type="radio" id="wrongaddress"/>(Ad has wrong address)</label>
CSS:
label{display: block}
.intro{width: 12em; float: left; font-weight: bold}
Demo.
Less is more.