I have some JS for some radio buttons that works with no label wrapped around the radio buttons, but as soon as I add my label class to the radio buttons to style the radio buttons according to my theme, it stops working.
Here is the JS
$("#bn_only_yes").click(function(){
$("#bn_yes").attr("checked", "checked");
});
And here is the code it works fine with
<!-- IF B_BN_ONLY -->
<br />
<b>{L_30_0063}</b>
<br />
<input type="radio" name="buy_now_only" value="n" {BN_ONLY_N} id="bn_only_no">
{L_029}
<input type="radio" name="buy_now_only" value="y" {BN_ONLY_Y} id="bn_only_yes">
{L_030}
<!-- ENDIF -->
<!-- IF B_BN -->
<br />
<b>{L_496}</b>
<br />
<input type="radio" name="buy_now" id="bn_no" value="no" {BN_N}>
{L_029}
<input type="radio" name="buy_now" id="bn_yes" value="yes" {BN_Y}>
{L_030}
<input type="text" name="buy_now_price" id="bn" size="10" value="{BN_PRICE}">
{CURRENCY}
<!-- ENDIF -->
And here is the code that adds the label class styling to my inputs but the JS code stops working
<!-- IF B_BN_ONLY -->
<br />
<b>{L_30_0063}</b>
<br />
<label class="tz-radiobutton">
<input type="radio" name="buy_now_only" value="n" {BN_ONLY_N} id="bn_only_no">
{L_029}
</label>
<label class="tz-radiobutton">
<input type="radio" name="buy_now_only" value="y" {BN_ONLY_Y} id="bn_only_yes">
{L_030}
</label>
<!-- ENDIF -->
<!-- IF B_BN -->
<br />
<b>{L_496}</b>
<br />
<label class="tz-radiobutton">
<input type="radio" name="buy_now" id="bn_no" value="no" {BN_N}>
{L_029}
</label>
<label class="tz-radiobutton">
<input type="radio" name="buy_now" id="bn_yes" value="yes" {BN_Y}>
{L_030}
</label>
<input type="text" name="buy_now_price" id="bn" size="10" value="{BN_PRICE}">
{CURRENCY}
<!-- ENDIF -->
I have even tried adding the input ID to the label but it still won't work.
Anyone have any ideas how I can include the label class in the JS as well as the input ID.
ADDING TZ-RADIOBUTTON CSS
header, footer, article, nav, #tz-hmenu-bg, .tz-sheet, .tz-hmenu a, .tz-vmenu a, .tz- slidenavigator > a, .tz-checkbox:before, .tz-radiobutton:before
{
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
header, footer, article, nav, #tz-hmenu-bg, .tz-sheet, .tz-slidenavigator > a, .tz- checkbox:before, .tz-radiobutton:before
{
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
label.tz-radiobutton:before
{
background: #FFFFFF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border:1px solid #8496A4;
margin:0 auto;
width:16px;
height:16px;
display: inline-block;
vertical-align: top;
content: ' ';
}
label.tz-radiobutton
{
cursor: pointer;
font-size: 13px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
line-height: 16px;
display: inline-block;
color: #323C43 !important;
position: relative;
}
.tz-radiobutton>input[type="radio"]
{
vertical-align: baseline;
margin: 0 5px 0 0;
}
label.tz-radiobutton.active:before
{
background: #FFFFFF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border:1px solid #8496A4;
margin:0 auto;
width:16px;
height:16px;
display: inline-block;
}
label.tz-radiobutton.hovered:before
{
background: #FFFFFF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border:1px solid #8496A4;
margin:0 auto;
width:16px;
height:16px;
display: inline-block;
}
label.tz-radiobutton input[type="radio"]
{
display: none;
}
label.tz-radiobutton.tz-checked:after
{
content: url('../images/radiobuttonicon.png');
position: absolute;
line-height: 12px;
left: 2px;
top: 2px;
}
Seeing your CSS I guess you want to add a style to the label of #btn_yes on click: label.tz-radiobutton.tz-checked:after {} and display an icon with it.
1) In the CSS you've posted is a closing } missing in the line above header, footer, ....
2) To get the style working you need to add a class tz-checked to the label:
$("#bn_only_yes").click(function(){
$("#bn_yes").parent().addClass('tz-checked');
});
The third FIDDLE.
And if you want to set the attribute checked on the checkbox too:
$("#bn_only_yes").click(function(){
$("#bn_yes").attr('checked', 'checked').parent().addClass('tz-checked');
});
You will never see the checked input because of
label.tz-radiobutton input[type="radio"] {
display: none;
}
Related
I've finished making a form for my website and I've set in the action attribute of form an email where I want this form to be sent, but I never receive anything. My other problem is how can I make the form only be allowed to be sent to the email if all the inputs have been filled and if the checkbox has been ticked? Else receives an error saying you have to fill everything. My idea is to make a Q&A, a person submits their info and question and receive an email with an answer, but I'm not receiving anything and I want the form to have a certain specification to be sent. I'll leave below the HTML of the Q&A tab and only the CSS relevant to that tab. I guess this can be fixed with if statements in JS but I tried and haven't had luck.
Code
/*Everything beneath has to do with the Q&A tab*/
#Q-A-BG {
background: url('Images/Q&A-BG.jpg');
background-size: cover;
}
;
.Questions {
display: flex;
flex-direction: column;
}
.Questions h1 {
text-align: center;
padding: 30px 0px 10px 0px;
}
.Questions input[type='text'],
.Questions input[type=email],
.Questions textarea {
font-size: inherit;
padding-left: 10px;
}
.Questions input,
.Questions textarea {
width: 450px;
height: 40px;
border-radius: 3px;
border: 1px solid grey;
}
.Questions textarea {
font-family: 'Montserrat', sans-serif;
height: 100px;
}
.InputSection {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 25px;
}
.InputSection select,
.InputSection option {
width: 450px;
height: 40px;
padding: 5px;
font-size: 16px;
-webkit-appearance: none;
font-family: 'Montserrat', sans-serif;
}
.InputSection label {
align-self: start;
margin-left: 550px;
}
.InputSection a {
text-decoration: none;
color: white;
font-weight: bold;
}
.InputSection a:hover,
.InputSection a:active {
text-decoration: underline;
}
.InputSection button {
align-self: flex-start;
margin-left: 560px;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
background-color: #5995DA;
border: none;
border-radius: 3px;
padding: 10px 10px;
cursor: pointer;
}
.Checkbox input {
margin-top: 10px;
height: 15px;
width: 15px;
border-radius: 3px;
margin-left: 10px;
}
#SubmitButton:hover {
opacity: 0.8;
}
#SubmitButton:active {
opacity: 0.5;
}
.InputSection input[type='text']:invalid,
.InputSection input[type='email']:invalid,
.InputSection input[type='checkbox']:invalid {
border: 1px solid #D55C5F;
color: #D55C5F;
box-shadow: none;
}
.InputSection input[type='text']:valid,
.InputSection input[type='email']:valid {
background-color: aliceblue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>What's out there</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200&display=swap" rel="stylesheet">
<style>
</style>
<link rel='stylesheet' href='../styles.css' />
</head>
<body id='Q-A-BG'>
<header class="Header Subsection">
<!-- This is the menu-->
<nav class="Header-Container">
<ul class="Menu SubsectionMenu">
<li>Home</li>
<li>Q&A</li>
<li>Images</li>
<li>Blog</li>
</ul>
</nav>
</header>
<article class="Questions">
<!--This has to do with the Information section-->
<h1> Submit your question</h1>
<form action='WOT.QuestionsAnswers#gmail.com' method='get' class='Information-Section'>
<div class="InputSection">
<label for='full-name'> First name</label>
<input id='full-name' name='full-name' type='text' placeholder="First Name" />
</div>
<div class="InputSection">
<label for='full-name'> Last name</label>
<input id='full-name' name='full-name' type='text' placeholder="Last Name" />
</div>
<div class="InputSection">
<label for='email'> Email</label>
<input id='email' name='email' type='email' placeholder='Your Email' />
</div>
<div class="InputSection">
<label for='Education'>Level of education</label>
<select id='Education' name='Education'>
<option value='None'></option>
<option value='Hs'>High School</option>
<option value='Pu'>Physics undergraduate</option>
<option value='Pg'>Physics graduate</option>
<option value='Al'>Adult with little knowledge of physics</option>
<option value='As'>Adult with some knowledge of physics</option>
<option value='Ac'>Adult with college level knowledge of physics</option>
</select>
</div>
<div class="InputSection">
<label for='abstract'> Your question</label>
<textarea id='abstract' name='abstract' placeholder="Be precise and describe your question in less than 100 words"></textarea>
</div>
<div class="InputSection">
<label class='Checkbox' for='available'>
<input id='available' name='available' type='checkbox' value='Agrees to the terms'/>
<span> I accept the Terms and Conditions</span>
</label>
</div>
<div class="InputSection">
<button id="SubmitButton">Submit</button>
</div>
</form>
</article>
</body>
</html>
Use a required in the end of your input field.
E.g.: <input id='email' name='email' type='email' placeholder='Your Email' required/>
From W3schools:
The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out
before submitting the form.
Note: The required attribute works with the following input types:
text, search, URL, tel, email, password, date pickers, number,
checkbox, radio and file.
Just put "required" in the input type tag
i.e.
<input id='full-name' name='full-name' type='text' required placeholder="First Name"/>
there is html attribute which allow you to validate if field contains something called required what you have to do is to insert it in every input you want to contain something or not be empty even the check-box like the following
<input type="text" name="" required>
or you can validate the form with JavaScript if you want to.
And what you have to do about form submission is to pass mailto before write the email thereafter write it like the following
<form method="post" action="mailto:someone#example.com">
</form>
<label for="seeker" class="checkbox">
I am a Job Seeker
<input type="radio" id="seeker" name="designation">
</label>
<label for="employer" class="checkbox">
I am an Employer
<input type="radio" id="employer" name="designation">
</label>
I have multiple HTML radio inputs which are wrapped around labels (https://i.imgur.com/GLdqodq.png) when a radio is selected for say input name "designation" I'd like to add a border color to the label of the radio button that was selected and remove the border from the other labels (https://i.imgur.com/LOMlBUP.png), here's the the JS code I tried using but for some reason when a radio button is unchecked JS can't seem to detect the event.
const radios = document.querySelectorAll('.checkbox input')
radios.forEach((radio) => {
radio.addEventListener('change', e => {
if (e.target.checked) {
// logic to add label border
} else {
// logic to remove label border
}
})
})
I know this can be done using the CSS plus (+) operator but seems like that would require the label to preceded the input, something I wouldn't want to do. However I'm open to using a CSS method as long as the markup wouldn't have to be changed.
const inputs= document.body.querySelectorAll("input")
document.addEventListener("change", (e)=>{
inputs.forEach(input=>{
if(input.checked){
input.labels[0].style="border-style: solid; padding: 10px;"
}
if(!input.checked){
input.labels[0].style=""
}
})
})
here is the js logic
You can also try this code snippet. I have also provided the required styling if you want.
document.querySelector(".first-checkbox").addEventListener('click', function(){
document.querySelector(".first-checkbox").classList.add("active");
document.querySelector(".second-checkbox").classList.remove("active");
})
document.querySelector(".second-checkbox").addEventListener('click', function(){
document.querySelector(".second-checkbox").classList.add("active");
document.querySelector(".first-checkbox").classList.remove("active");
})
.first-checkbox,.second-checkbox{
border:1px solid #D3D3D3;
border-radius:5px;
padding:5px;
}
.checkbox-container{
width:80%;
display:flex;
justify-content:space-around;
padding:20px;
border:1px solid #C0C0C0;
border-radius:5px;
}
.active{
border:1px solid black;
border-radius:5px;
padding:5px;
}
<div class="checkbox-container">
<label for="seeker" class="first-checkbox">
I am a Job Seeker
<input type="radio" id="seeker" name="designation">
</label>
<label for="employer" class="second-checkbox">
I am an Employer
<input type="radio" id="employer" name="designation">
</label>
</div>
You can simply do it css using input:checked selector
Take an example from below code and codepen link https://codepen.io/naren-irain/pen/XWXWWqq
.radiobox {
display: inline-block;
cursor: pointer;
user-select: none;
}
.radiobox input {
position: absolute;
opacity: 0;
}
.radiobox .check {
background: #fff;
border: 1px solid #979797;
border-radius: 50%;
display: inline-block;
width: 16px;
height: 16px;
position: relative;
top: 1px;
margin-right: 5px;
vertical-align: top;
}
.radiobox span, .radioTab span, .checkbox span {
display: inline-block;
vertical-align: top;
}
.radiobox .check i,
.radioTab .check i {
background: #0db837;
border-radius: 50%;
display: block;
width: 10px;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
margin: -5px 0 0 -5px;
opacity: 0;
transform: scale(0.75);
transition: all 0.3s;
}
.radiobox input:checked+.check,
.radioTab input:checked+ span .check {
border-color: #5cb85c;
}
.radiobox input:checked+.check i,
.radioTab input:checked+ span .check i {
opacity: 1;
transform: scale(1);
}
<h4>Select any one option</h4>
<label class="radiobox" for="one">
<input type="radio" id="one" name="designation" value="one" />
<span class="check"><i></i></span>
<span>This is one option</span>
</label>
<br/>
<br/>
<label class="radiobox" for="two">
<input type="radio" id="two" name="designation" value="two" />
<span class="check"><i></i></span>
<span>Never think this is an option</span>
</label>
I have an accordion that I have created to have certain selected pdf's to show.
I then added an iframe on the same page to show the selected pdf next to it.
I then tried to add some javascript code to load into the iframe to pick which the user has selected to show the correct pdf. It does not seem to work though.
I have linked my code pen project for the code here: https://codepen.io/Si24/pen/KrprRN
html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>What to Say Dialogues</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../App_Themes/Dialogue/WhatToSay.css" />
</head>
<body>
<form id="WhatToSay" runat="server">
<div class="wrap">
<section class="dialogue-section">
<h1>Dialogues</h1>
<!-- beginning of prospecting section-->
<div class="dial-section-1">
<input id="dial-1" type="radio" name="tabs" tabindex="1" />
<label for="dial-1">Prospecting</label>
<div class="dial-wrap">
<div class="sections">
<input id="sections-2" type="radio" name="prospecting-tab-one" tabindex="3" />
<label for="sections-2">Cold Calling - Offer of Information</label>
<p class="result">A Reason to call : Making market information available to a prospect so as to gain an appointment as well as have a reason to keep in touch.</p>
</div>
<div class="sections">
<input id="sections-7" type="radio" name="prospecting-tab-one" tabindex="8" />
<label for="sections-7">People you may know</label>
<p class="result">A Reason to call :
</p>
</div>
<div class="sections">
<input id="sections-8" type="radio" name="prospecting-tab-one" tabindex="9" />
<label for="sections-8">Pre Qualifying</label>
<p class="result">A Reason to call :
</p>
</div>
<div class="sections">
<input id="sections-9" type="radio" name="prospecting-tab-one" tabindex="10" />
<label for="sections-9">Show House</label>
<p class="result">A Reason to call: Letting the neighbours know that there is a show house in there vicinity so as to qualify and get an appointment.</p>
</div>
<div class="sections">
<input id="sections-12" type="radio" name="prospecting-tab-one" tabindex="13" />
<label for="sections-12">OPT in Follow Up</label>
</div>
</div>
</div>
<!-- end of prospecting Dialogue section-->
<div class="dial-section-2">
<input id="dial-2" type="radio" name="tabs" tabindex="14" />
<label for="dial-2">Listing</label>
<div class="dial-wrap">
<div class="sections">
<input id="sections-13" type="radio" name="questions-tab-two" tabindex="15">
<label for="sections-13">Pre Qualifying</label>
<!-- end of question label -->
</div>
<div class="sections">
<input id="sections-15" type="radio" name="questions-tab-two" tabindex="17">
<label for="sections-15">Listing Presentation</label>
<!-- end of question label -->
<p class="result">Presentation: Getting the Listing using trusted methods such as confirmation of Reason and Motivation, establishing market value (Price) and getting the mandate.
</p>
</div>
<div class="sections">
<input id="sections-16" type="radio" name="questions-tab-two" tabindex="18">
<label for="sections-16">Intelligent Pricing</label>
<!-- end of question label -->
<p class="result">Pricing: A visual and easy interactive way of showing how incorrect pricing affects buyer interest.
</p>
</div>
<div class="sections">
<input id="sections-17" type="radio" name="questions-tab-two" tabindex="19">
<label for="sections-17">Reality Check</label>
<!-- end of question label -->
<p class="result">The Competition: A visual picture showing stock availability, competition and what’s happening in the market.
</p>
</div>
<div class="sections">
<input id="sections-18" type="radio" name="questions-tab-two" tabindex="20">
<label for="sections-18">How to Fill in the Reality Check Sheet</label>
<!-- end of question label -->
<p class="result">The Competition: How to use the Reality check sheet to show stock availability, competition and what’s happening in the market as well as where the data comes from.
</p>
</div>
</div>
</div>
<div class="dial-section-3">
<input id="dial-3" type="radio" name="tabs" tabindex="21" />
<label for="dial-3">CMA prospecting - Video / SMS</label>
<div class="dial-wrap">
<div class="sections">
<input id="sections-19" type="radio" name="questions-tab-two" tabindex="22">
<label for="sections-19">Video Dialogue</label>
<!-- end of question label -->
<p class="result">A Reason to call: To confirm an appointment already made but not yet pre-qualified for, to find out how Motivated they are and Reason for selling.
</p>
</div>
<div class="sections">
<input id="sections-20" type="radio" name="questions-tab-two" tabindex="23">
<label for="sections-20">Video Dialogue</label>
<!-- end of question label -->
<p class="result">Pre Listing Package Suggestions: Some suggestions for inclusion in you pre Appointment Listing Package icluding various reports from CMAInfo.
</p>
</div>
<div class="sections">
<input id="sections-21" type="radio" name="questions-tab-two" tabindex="24">
<label for="sections-21">Sample YouTube Video</label>
<!-- end of question label -->
<p class="result">Presentation: Getting the Listing using trusted methods such as confirmation of Reason and Motivation, establishing market value (Price) and getting the mandate.
</p>
</div>
<div class="sections">
<input id="sections-22" type="radio" name="questions-tab-two" tabindex="25">
<label for="sections-22">SMS Text..</label>
<!-- end of question label -->
<p class="result">Pricing: A visual and easy interactive way of showing how incorrect pricing affects buyer interest.
</p>
</div>
</div>
</section>
</div>
<div class="split right">
<iframe id="dialPdf" src="" width="50%"> </iframe>
</div>
</form>
</body>
</html>
Css :
body {
-webkit-animation:bugfix infinite 1s;
}
#-webkit-keyframes bugfix {
from {padding:0;}
to {padding:0;}
}
body{
background:radial-gradient(ellipse fartherst-side as 100% 100%,#d4faf6 1%,#85d8ce 30%,#085078 120%);
background-attachment:fixed;
padding-top:2em;
overflow-y:scroll;
}
.split{
height:100%;
width:50%;
position:fixed;
z-index:1;
overflow:hidden;
}
.left{
left:0;
}
.right{
right:0;
}
.wrap {
display:block;
max-width:1024px;
margin: 0 auto 2em;
padding: 0 1em;
/*width:100%;*/
}
#media(min-width:43.75em)
{
.wrap{
padding:3em;
}
}
p{
color:#555;
text-shadow:1px 1px 1px #fff;
margin-left:2em;
}
a, a:visited{
color:#4bc5b7;
text-decoration:none;
}
.dialogue-section{
background:#f1f1f1;
box-shadow:0 2px 5px rgba(68,68,0.4);
display:inline-block;
font-size: 1rem;
padding: 1em;
position: relative;
vertical-align:top;
width: 100%;
}
#media (min-width: 50em){
.dialogue-section{
font-size:0.75rem;
padding:1em 1.5em;
}
}
#media (min-width:62.5em){
.dialogue-section{
font-size: 1rem;
}
}
.dialogue-section h1{
font-family:Arial, Helvetica, sans-serif;
color:#085078;
font-size:1.25em;
font-size:5.5vw;
font-weight:700;
margin-bottom:0.25em;
}
#media (min-width:32.25em){
.dialogue-section h1{
font-size:3.25em;
font-size:4.9vw;
}
}
.dialogue-section > p, .dialogue-section >h1 {
text-align:center;
}
.dialogue-section > p {
font-size:0.667em;
font-size:2.8vw;
margin-bottom:1em;
}
#media (min-width:22.1875em){
.dialogue-section > p{
font-size:0.667em;
}
}
#media(min-width:31.25em){
.dialogue-section > p{
font-size:1em;
}
}
#media(min-width:81.25em){
.dialogue-section > p{
font-size:1.15em;
}
}
div[class^=dial] {
width: 100%;
}
div[class^=dial] > label {
background: #2980b9;
color: #fff;
cursor: pointer;
display: block;
font-weight: bold;
line-height: 1.4;
margin-bottom: 0.5em;
padding: 0.75em 0.5em;
transition: all 0.55s;
}
div[class^= dial] > label:hover {
background: #41b9ff;
}
#media (min-width:50em){
div[class^=dial] > label{
font-size:1.25em;
}
}
div[class^=dial] > input {
position:absolute;
z-index: -999;
}
div[class^= dial] > input:focus + label {
background:#41b9ff;
letter-spacing:1px;
}
div[class^=dial].dial-wrap {
height: 100%;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: all 0.75s cubic-bezier(0.19,1,0.22,1);
width: 100%;
}
div[class^=dial] > input:checked ~ .dial-wrap {
max-height: 1000px;
opacity: 1;
transition: all 1.95s cubic-bezier(0.19,1 0.22,1);
}
.dial-wrap .sections {
margin: 1em 0;
}
.section{
margin-left:1em;
}
.dial-wrap label {
color: #0a6090;
cursor: pointer;
display: block;
font-weight: bold;
margin-bottom: 0.5em;
}
#media(min-width:50em){
.dial-wrap label {
font-size: 1.25em;
}
}
.dial-wrap input {
position: absolute;
z-index: -999;
top: -1000px;
}
.dial-wrap input:focus + label {
color: #064060;
}
.dial-wrap input:not(:checked) ~ p {
height: 100%;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: all 0.75s cubic-bezier(0.19,1,0.22,1);
}
.dial-wrap input:checked ~ p {
max-height: 500px;
opacity: 1;
transition: all 1.95s cubic-bezier(0.19,1,0.22,1);
}
input:focus{
border:3px solid red;
outline:3px solid red;
background:red;
}
a:focus {
color:#085078;
font-weight:bold;
outline:none;
}
#dialPdf{
box-shadow: 0 2px 5px rgba(68,68,0.4);
height:100%;
width:50%;
padding:1em 1.5em;
}
and javascript:
var docPdf = document.getElementsByClassName("docPdf");
function openPdf() {
document.getElementById("dialPdf").src = docPdf;
////console.log("this is working");
//document.getElementById("dialPdf").src = "";
}
any help or info what I'm doing wrong will be appreciated.
Call openPdf function when you click your accordion with expected url to be load into iframe.
Updated javascript code
function openPdf(url) {
document.getElementById("dialPdf").src = url;
}
I am attempting to create a check box with an X instead of a check using an input box. However, some I want to work as a radio button (when you click one, the other's get "un-checked").
Basically, a group of three check boxes that only allows 1 box to have the check in it at a time.
Does anyone know an easy way to accomplish the radio button-esq approach to this without creating a specific function for each group of check box's?
HTML
<input name="box1" id="box1" class="checkBox" value="" readonly="readonly" onclick="return checkBox('box1')">
CSS
.checkBox { background-color:#fff; margin: 0; border: 0; padding: 0; border:1px solid #000; text-align: center; cursor: default;font-family: 'Arial Narrow', Arial, sans-serif;font-size:11px;font-weight:bold;width:1.1em;height:1.1em; }
Function
function checkBox(box) {
x = document.getElementById(box).value;
document.getElementById(box).value = (x == "X") ? "" : "X";
}
You can use custom radio buttons (css only) that looks like checkbox (Demo on jsBin and Demo on jsFiddle)
CSS:
div.radios > label > input {
visibility: hidden;
}
div.radios > label {
display: inline-block;
margin: 0 0 0 -10px;
padding: 0 0 10px 0;
height: 20px;
cursor:pointer;
}
div.radios > label > img {
display: inline-block;
padding: 0px;
height:20px;
width:20px;
background: none;
vertical-align:top;
}
div.radios > label > input:checked +img {
background: url(https://cdn2.iconfinder.com/data/icons/picons-essentials/71/no-24.png);
background-repeat: no-repeat;
background-position:center center;
background-size:20px 20px;
}
HTML:
<div class='radios'>
<label title="item1">
<input type="radio" name="foo" value="0" /> <img /> Radio One
</label>
<label title="item2">
<input type="radio" name="foo" value="1" /> <img /> Radio Two
</label>
</div>
You can give the radio group an identifier class, for instance "radio" and onclick reset them and set val of the clicked one. A jquery sample would be
<input class="checkBox radio" value="" readonly="readonly">
<input class="checkBox radio" value="" readonly="readonly">
<input class="checkBox radio" value="" readonly="readonly">
$(".radio").click(function() {
$(".radio").val('');
$(this).val('X');
});
For a pure CSS solution (that actually validates), you could use something like:
<input id="rd1" type="radio" name="opt" /><label for="rd1"></label>
<input id="rd2" type="radio" name="opt" /><label for="rd2"></label>
<input id="rd3" type="radio" name="opt" /><label for="rd3"></label>
And this is the CSS for it:
.radio-special {
display: none;
}
.radio-special + label {
background: #ddd;
height:24px;
width: 24px;
box-shadow: inset 0 0 2px 2px #aaa;
display: inline-block;
}
.radio-special:checked + label {
background: url('https://cdn1.iconfinder.com/data/icons/30_Free_Black_ToolBar_Icons/20/Black_Remove.png') #ddd no-repeat 2px 2px;
}
Note that this will still look a bit weird in the html side of it, but at least its valid markup.
Check how that displays on older versions of IE. It works fine on IE10.
Fiddle
Thanks for everyone's help! I've taken everyone's advice and decided to use a custom image radio/check box through css.
This method will not work for IE7/8 because of the :checked attribute but all you need to do is use selectivizr and everything should run smoothly.
HTML
<input id="option_1" name="option1" type="radio">
<label for="option_1">Option 1</label>
<input id="option_2" name="option2" type="radio">
<label for="option_2">Option 2</label>
<input id="option_3" name="option3" type="radio">
<label for="option_3">Option 3</label>
CSS
input[type='checkbox'], input[type='radio'] { opacity: 0; float: left; width: 14px; }
input[type='radio'] + label, input[type='checkbox'] + label {
margin: 0;
margin-right:-10px; /* Position between the box+label */
clear: none;
padding: 1px 1px 1px 20px; /* Position of the box+label */
cursor: pointer;
background: url('emptyBox.png') left center no-repeat;
float:left;
}
input[type='radio']:checked + label, input[type='checkbox']:checked + label {
background-image: url('selectedBox.png');
}
I have an html form that a user will fill out and print. Once printed, these forms will be faxed or mailed to a government agency, and need to look close enough like the original form published by said agency that a government bureaucrat doesn't spot that this is a reproduction. The data entered in the form is not saved anywhere or even submitted back to a web server. All that matters is that our users can easily find these forms on our intranet site and type into the form for printing with their normal keyboard.
On the screen I want to leave the radio button as-is, to enforce and communicate radio button usage (choose only one option). However, when it prints out I need it to print with the square checkbox style rather than the round radio button style. I know how to use a media selector to set styles for print only, so that's not the issue. It's just that I don't know if I can style the radio button like I want at all.
If I can't get this working I'm gonna have to create a checkbox to shadow each radio button, use javascript to keep the checkboxes and radio buttons in sync, and css to show the one I care about in the proper medium. Obviously if I can just style them it would save a lot of work.
Three years after this question is posted and this is almost within reach. In fact, it's completely achievable in Firefox 1+, Chrome 1+, Safari 3+ and Opera 15+ using the CSS3 appearance property.
The result is radio elements that look like checkboxes:
input[type="radio"] {
-webkit-appearance: checkbox; /* Chrome, Safari, Opera */
-moz-appearance: checkbox; /* Firefox */
-ms-appearance: checkbox; /* not currently supported */
}
<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>
jsfiddle: http://jsfiddle.net/mq8Zq/
Note: this was eventually dropped from the CSS3 specification due to a lack of support and conformance from vendors. I'd recommend against implementing it unless you only need to support Webkit or Gecko based browsers.
This is my solution using only CSS (Jsfiddle: http://jsfiddle.net/xykPT/).
div.options > label > input {
visibility: hidden;
}
div.options > label {
display: block;
margin: 0 0 0 -10px;
padding: 0 0 20px 0;
height: 20px;
width: 150px;
}
div.options > label > img {
display: inline-block;
padding: 0px;
height:30px;
width:30px;
background: none;
}
div.options > label > input:checked +img {
background: url(http://cdn1.iconfinder.com/data/icons/onebit/PNG/onebit_34.png);
background-repeat: no-repeat;
background-position:center center;
background-size:30px 30px;
}
<div class="options">
<label title="item1">
<input type="radio" name="foo" value="0" />
Item 1
<img />
</label>
<label title="item2">
<input type="radio" name="foo" value="1" />
Item 2
<img />
</label>
<label title="item3">
<input type="radio" name="foo" value="2" />
Item 3
<img />
</label>
</div>
In CSS3:
input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}
In reality:
<span class=fakecheckbox><input type=radio><img src="checkbox.png" alt=""></span>
#media screen {.fakecheckbox img {display:none}}
#media print {.fakecheckbox input {display:none;}}
and you'll need Javascript to keep <img> and radios in sync (and ideally insert them there in a first place).
I've used <img>, because browsers are usually configured not to print background-image. It's better to use image than another control, because image is non-interactive and less likely to cause problems.
Pure Vanilla CSS / HTML solution in 2021. It uses the CSS appearance: none; property.
Seems to be compatible with all major browsers at this time:
https://caniuse.com/?search=appearance%3A%20none
input[type="radio"]{
appearance: none;
border: 1px solid #d3d3d3;
width: 30px;
height: 30px;
content: none;
outline: none;
margin: 0;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
input[type="radio"]:checked {
appearance: none;
outline: none;
padding: 0;
content: none;
border: none;
}
input[type="radio"]:checked::before{
position: absolute;
color: green !important;
content: "\00A0\2713\00A0" !important;
border: 1px solid #d3d3d3;
font-weight: bolder;
font-size: 21px;
}
<input type="radio" name="radio" checked>
<input type="radio" name="radio">
<input type="radio" name="radio">
Yes it can be done using this css, i've hidden the default radio button and made a custom radio button that looks like a checkbox.
Working Perfect in 2022.
.css-prp
{
color: #17CBF2;
font-family: arial;
}
.con1 {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
cursor: pointer;
font-size: 15px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.con1 input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
background-color: lightgrey;
border-radius: 10%;
}
/* When the radio button is checked, add a blue background */
.con1 input:checked ~ .checkmark {
background-color: #17CBF2;
}
<label class="con1"><span>Yes</span>
<input type="radio" name="radio1" checked>
<span class="checkmark"></span>
</label>
<label class="con1"><span>No</span>
<input type="radio" name="radio1">
<span class="checkmark"></span>
</label>
I tweaked user2314737's answer to use font awesome for the icon. For those unfamiliar with fa, one significant benefit over img's is the vector based rendering inherent to fonts. I.e. no image jaggies at any zoom level.
jsFiddle
Result
div.checkRadioContainer > label > input {
visibility: hidden;
}
div.checkRadioContainer {
max-width: 10em;
}
div.checkRadioContainer > label {
display: block;
border: 2px solid grey;
margin-bottom: -2px;
cursor: pointer;
}
div.checkRadioContainer > label:hover {
background-color: AliceBlue;
}
div.checkRadioContainer > label > span {
display: inline-block;
vertical-align: top;
line-height: 2em;
}
div.checkRadioContainer > label > input + i {
visibility: hidden;
color: green;
margin-left: -0.5em;
margin-right: 0.2em;
}
div.checkRadioContainer > label > input:checked + i {
visibility: visible;
}
<div class="checkRadioContainer">
<label>
<input type="radio" name="radioGroup" />
<i class="fa fa-check fa-2x"></i>
<span>Item 1</span>
</label>
<label>
<input type="radio" name="radioGroup" />
<i class="fa fa-check fa-2x"></i>
<span>Item 2</span>
</label>
<label>
<input type="radio" name="radioGroup" />
<i class="fa fa-check fa-2x"></i>
<span>Item 3</span>
</label>
</div>
You can hide de default radio appareance and then draw the check with clip-path in the pseudo-element, no javascript needed.
label{
display: block;
margin-bottom: 10px;
}
input[type=radio] {
appearance: none;
background-color: #fff;
width: 15px;
height: 15px;
border: 2px solid #ccc;
border-radius: 2px;
display: inline-grid;
place-content: center;
}
input[type=radio]::before {
content: "";
width: 10px;
height: 10px;
transform: scale(0);
transform-origin: bottom left;
background-color: #fff;
clip-path: polygon(13% 50%, 34% 66%, 81% 2%, 100% 18%, 39% 100%, 0 71%);
}
input[type=radio]:checked::before {
transform: scale(1);
}
input[type=radio]:checked{
background-color: #0075FF;
border: 2px solid #0075FF;
}
<label>
<input type="radio" name="fruit"> Apple
</label>
<label>
<input type="radio" name="fruit"> Banana
</label>
<label>
<input type="radio" name="fruit"> Orange
</label>
<label>
<input type="radio" name="fruit"> Avocado
</label>
Simple and neat with fontawesome
input[type=radio] {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
outline: none;
content: none;
margin-left: 5px;
}
input[type=radio]:before {
font-family: "FontAwesome";
content: "\f00c";
font-size: 25px;
color: transparent !important;
background: #fff;
width: 25px;
height: 25px;
border: 2px solid black;
margin-right: 5px;
}
input[type=radio]:checked:before {
color: black !important;
}
appearance property doesn't work in all browser. You can do like the following-
input[type="radio"]{
display: none;
}
label:before{
content:url(http://strawberrycambodia.com/book/admin/templates/default/images/icons/16x16/checkbox.gif);
}
input[type="radio"]:checked+label:before{
content:url(http://www.treatment-abroad.ru/img/admin/icons/16x16/checkbox.gif);
}
<input type="radio" name="gender" id="test1" value="male">
<label for="test1"> check 1</label>
<input type="radio" name="gender" value="female" id="test2">
<label for="test2"> check 2</label>
<input type="radio" name="gender" value="other" id="test3">
<label for="test3"> check 3</label>
It works IE 8+ and other browsers
I don't think you can make a control look like anything other than a control with CSS.
Your best bet it to make a PRINT button goes to a new page with a graphic in place of the selected radio button, then do a window.print() from there.
Yes, CSS can do this:
input[type=checkbox] {
display: none;
}
input[type=checkbox] + *:before {
content: "";
display: inline-block;
margin: 0 0.4em;
/* Make some horizontal space. */
width: .6em;
height: .6em;
border-radius: 0.6em;
box-shadow: 0px 0px 0px .5px #888
/* An outer circle. */
;
/* No inner circle. */
background-color: #ddd;
/* Inner color. */
}
input[type=checkbox]:checked + *:before {
box-shadow: 0px 0px 0px .5px #888
/* An outer circle. */
, inset 0px 0px 0px .14em #ddd;
/* An inner circle with above inner color.*/
background-color: #444;
/* The dot color */
}
<div>
<input id="check1" type="checkbox" name="check" value="check1" checked>
<label for="check1">Fake Checkbox1</label>
</div>
<div>
<input id="check2" type="checkbox" name="check" value="check2">
<label for="check2">Fake Checkbox2</label>
</div>
<div>
<input id="check2" type="radio" name="check" value="radio1" checked>
<label for="check2">Real Checkbox1</label>
</div>
<div>
<input id="check2" type="radio" name="check" value="radio2">
<label for="check2">Real Checkbox2</label>
</div>
Simple but optimal solution.
.custom-radio[type="radio"]{
appearance: none;
border: 1px solid #d3d3d3;
width: 18px;
height: 18px;
content: none;
outline: none;
border-radius:100%;
margin: 0;
}
.custom-radio[type="radio"]:checked {
appearance: none;
border-radius:100%;
outline: none;
padding: 0;
content: none;
border: none;
}
.custom-radio[type="radio"]:checked::before{
position: absolute;
background:#0c1332 ;
accent-color:blue;
border-radius:100%;
color: white !important;
content: "\00A0\2713\00A0" !important;
border: 1px solid #d3d3d3;
font-weight: bolder;
font-size: 13px;
}
<p>Please select your favorite Web language:</p>
<input type="radio" id="html" class="custom-radio" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" class="custom-radio" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" class="custom-radio" value="JavaScript">
<label for="javascript">JavaScript</label>
So I have been lurking on stack for so many years. This is actually my first time posting on here.
Anyhow, this might seem insane but I came across this post while struggling with the same issue and came up with a dirty solution. I know there are more elegant ways to perhaps set this as a property value but:
if you look at lines 12880-12883 in tcpdf.php :
$fx = ((($w - $this->getAbsFontMeasure($tmpfont['cw'][`110`])) / 2) * $this->k);
$fy = (($w - ((($tmpfont['desc']['Ascent'] - $tmpfont['desc']['Descent']) * $this->FontSizePt / 1000) / $this->k)) * $this->k);
$popt['ap']['n'][$onvalue] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`110`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);
$popt['ap']['n']['Off'] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`111`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);
and lines 13135-13138 :
$fx = ((($w - $this->getAbsFontMeasure($tmpfont['cw'][`108`])) / 2) * $this->k);
$fy = (($w - ((($tmpfont['desc']['Ascent'] - $tmpfont['desc']['Descent']) * $this->FontSizePt / 1000) / $this->k)) * $this->k);
$popt['ap']['n']['Yes'] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`108`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);
$popt['ap']['n']['Off'] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`109`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);
Those widgets are rendered from the zapfdingbats font set... just swap the character codes and voila... checks are radios and/or vice versa. This also opens up ideas to make a custom font set to use here and add some nice styling to your form elements.
Anyhow, just figured I would offer my two cents ... it worked awesome for me.
It can be also like this:
input[type="radio"] {
border-radius: 50%;
width: 24px;
height: 24px;
}
input[type="radio"]:checked {
background: #d8046e url("../img/check.svg") center center no-repeat;
}
Very simple idea using a table and no Javascript.
Am I being too simplistic?
<style type="text/css" media="screen">
#ageBox {display: none;}
</style>
<style type="text/css" media="print">
#ageButton {display: none;}
</style>
<tr><td>Age:</td>
<td id="ageButton">
<input type="radio" name="userAge" value="18-24">18-24
<input type="radio" name="userAge" value="25-34">25-34
<td id="ageBox">
<input type="checkbox">18-24
<input type="checkbox">25-34
</td></tr>