I want to built a simple quiz in CSS without using javascript, I have written this code but please tell how can I apply action listener on radio button without using javascript? like if correct option is selected then a message "Correct" should be printed.
<!DOCTYPE html>
<html>
<head>
<title>Quiz</title>
</head>
<body>
<h3>Capital of USA is?</h3>
<input type="radio" value="opt1" name="capital">New York<br>
<input type="radio" value="opt2" name="capital">Washington<br>
</body>
</html>
You can use a bit of hack for this
Note:this might not be a good solution,this is the best that css can do
label {
display: none;
}
input:checked +br+ label {
display: block;
}
<h3>Capital of USA is?</h3>
<input type="radio" value="opt1" name="capital">New York
<br>
<label>Wrong answer</label>
<input type="radio" value="opt2" name="capital">Washington
<br>
<label>Right answer</label>
Related
I am new to css, and I am experimenting with css attribute selectors. I am trying to implement it to a radio button, but it seems not to do it's job
I tried moving the style tag inside or outside the head tag, but that doesn't seem to be the problem at all.
<!DOCTYPE HTML>
<html>
<style>
[type="radio"]{
margin: 800 px;
color:palevioletred;
size: 200px;
}
</style>
<head>
</head>
<body>
<input type="radio" name="gender" value="male">Male</input>
<input type="radio" name="gender" value="female">Female</input>
<input type="radio" name="gender" value="female">Other</input>
</body>
</html>
It has to change the color,size and margin (they are just test cases). I am not getting why there are no changes?
Let me clear you something out. Until here it is ok:
<input type="radio" name="gender" value="male"/>
to continue on just do that:
<input type="radio" name="gender" value="male"/><label>Male</label>
.
.
.
easy as that.
I'll put anything that was going wrong in code comments.
<!DOCTYPE HTML>
<html>
<!-- you cannot put the style tag (or anyhting else except the doctype)
anywhere except in the head or body of the document -->
<style>
[type="radio"] {
margin: 800 px; /* has to be 800px, not 800 px */
color: palevioletred;
size: 200px; /* this would have to be font-size or width depending on what you are trying to accomplish, not size */
}
</style>
<head>
</head>
<body>
<!-- input elements cannot have text or HTML content -->
<input type="radio" name="gender" value="male">Male</input><!-- and thus, no closing tag either -->
<input type="radio" name="gender" value="female">Female</input>
<input type="radio" name="gender" value="female">Other</input>
</body>
</html>
I'm trying to do a pretty simple checkbox hack in an HTML email to make some basic in-email interactivity.
Something like the following:
<style>
input:checked + div {
text-decoration: line-through;
}
</style>
<label>
<input type="checkbox" style="display:none"/>
<div>A todo item</div>
</label>
Whenever the todo item is clicked, I can apply some styling marking it
done.
But if I make the todo item a link:
<style>
input:checked + a {
text-decoration: line-through;
}
</style>
<label>
<input type="checkbox" style="display:none"/>
Open Google
</label>
The checkbox isn't toggled when the link is clicked.
Here's a codepen to demonstrate.
Is there any way to get the link to open, and the checkbox to toggle? As this is destined for an HTML email, any javascript solution is off the table.
The answer is: you cannot without JS.
That HTML setup makes nested interactive contents. The fact is that the <a> tag receives the click event and that cancels the click on the label. You need some JS! This way the natural behaviour of the checkbox is not altered, i.e. you can un-click:
<style>
input:checked+a {
text-decoration: line-through;
}
</style>
<label for="myInput">
<input id="myInput" type="checkbox" style="display:none"/>
Open Google
</label>
Working Demo
EDIT
As it is for email and you cant use JS, just add a tabindex to a tag and a css. Its the closest you can get without using javascript
Working Demo below:
label {
display: block;
padding: 10px 0;
}
input:checked + div{
text-decoration: line-through;
}
a:focus{
text-decoration: line-through;outline:0;}
<label>
<input type="checkbox" style="display:none"/>
<div>Todo Item</div>
</label>
<label>
<input type="checkbox" style="display:none"/>
<div>Another todo Item</div>
</label>
<label>
<input type="checkbox" style="display:none" id='btnControl'/>
Open Google
</label>
JS
function myFunction() {
document.getElementById("me").style.textDecoration = "line-through";
}
HTML
<label>
<input type="checkbox" style="display:none"/>
<a href="http://www.google.com" id="me" onclick="myFunction()" target="_blank">Open
Google</a>
</label>
I'm aware this may seem like a stupid question that every should know. But I just can't for the life of me work it out.
The look I need to achieve is:
| == radio button
|Terrorists nice even spacing here |Counter-Terrorists
I have these radio buttons:
Image
But what i need is for them to be equally spaced while staying in the dead center of the page.
Ive messed around with them for ages to no avail.
HTML:
<input type='radio' id='choice' value='terrorist' class='radiopick'>Terrorist's
<input type='radio' id='choice' value='countert' class='radiopick'>Counter-Terrorist's
CSS:
input.radiopick{
}
try this.
HTML
<form>
<div class="radiopick">
<input type='radio' id='choice' value='terrorist' />Terrorist's</div>
<div class="radiopick">
<input type='radio' id='choice' value='countert' />Counter-Terrorist's</div>
</form>
CSS
form {
display:flex;
text-align:center;
}
form .radiopick {
justify-content: center;
width:150px;
margin: auto;
}
Have you thought of using tables? Although I don't fully understand the question, if you want even spacing for each box you could do something like:
<!DOCTYPE html>
<html>
<body>
<table style="width:300px" align="center">
<tr>
<td><input class="radiopick" type="radio" name="test" value="yes" />Terrorist</td>
<td><input class="radiopick" type="radio" name="test" value="yes" />Counter-Terrorist</td>
</tr>
</table>
</body>
</html>
An example can be found here
I have 3 radio buttons on the same line in a td of the table like that:
<td align="left">
CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" />
USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>
Now I would like to add some spaces between those radio buttons and I don't know how to do it.
I tryed to use width attribute, margin attribute but nothing changes.
Thank you very much.
Check working example on jsbin
Also, here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<td align="left">
CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" />
USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>
</body>
</html>
CSS:
input[type="radio"]{
margin: 0 10px 0 10px;
}
Use like this in CSS
input[type="radio"]{
//padding: or margin or line-height for better spaces bettween radio button according to your need and design;
}
Try this:
input[type="radio"]{margin:10px 0};}
put this in the css folder or in the header section of your html file. If your putting this in your html file in your header section, it should look like this:
<style type="text/css">
input[type="radio"]{margin: 10px 0};}
</style>
Hope this helped!
If you don't want to use fixed padding to the buttons, then consider wrapping each one with <label> tag, this will make the labels clickable too.
HTML:
<label>CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" /></label>
<label>USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/></label>
<label>EUR <input type="radio" name="currency" id="eur_currency" onChange="currencyChanged()"/></label>
CSS:
<style type="text/css">
label + label {
margin-left: 20px;
}
</style>
http://jsfiddle.net/9cJJ9/
Given the code bellow, how do I style the radio buttons to be next to the labels and style the label of the selected radio button differently than the other labels?
<link href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet">
<link href="http://yui.yahooapis.com/2.5.2/build/base/base-min.css" rel="stylesheet">
<div class="input radio">
<fieldset>
<legend>What color is the sky?</legend>
<input type="hidden" name="color" value="" id="SubmitQuestion" />
<input type="radio" name="color" id="SubmitQuestion1" value="1" />
<label for="SubmitQuestion1">A strange radient green.</label>
<input type="radio" name="color" id="SubmitQuestion2" value="2" />
<label for="SubmitQuestion2">A dark gloomy orange</label>
<input type="radio" name="color" id="SubmitQuestion3" value="3" />
<label for="SubmitQuestion3">A perfect glittering blue</label>
</fieldset>
</div>
Also let me state that I use the yui css styles as base. If you are not familir with them, they can be found here:
reset-fonts-grids.css
base-min.css
Documentation for them both here : Yahoo! UI Library
#pkaeding: Thanks. I tried some floating both thing that just looked messed up. The styling active radio button seemed to be doable with some input[type=radio]:active nomination on a google search, but I didnt get it to work properly. So the question I guess is more: Is this possible on all of todays modern browsers, and if not, what is the minimal JS needed?
The first part of your question can be solved with just HTML & CSS; you'll need to use Javascript for the second part.
Getting the Label Near the Radio Button
I'm not sure what you mean by "next to": on the same line and near, or on separate lines? If you want all of the radio buttons on the same line, just use margins to push them apart. If you want each of them on their own line, you have two options (unless you want to venture into float: territory):
Use <br />s to split the options apart and some CSS to vertically align them:
<style type='text/css'>
.input input
{
width: 20px;
}
</style>
<div class="input radio">
<fieldset>
<legend>What color is the sky?</legend>
<input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1" />
<label for="SubmitQuestion1">A strange radient green.</label>
<br />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2" />
<label for="SubmitQuestion2">A dark gloomy orange</label>
<br />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3" />
<label for="SubmitQuestion3">A perfect glittering blue</label>
</fieldset>
</div>
Follow A List Apart's article: Prettier Accessible Forms
Applying a Style to the Currently Selected Label + Radio Button
Styling the <label> is why you'll need to resort to Javascript. A library like jQuery
is perfect for this:
<style type='text/css'>
.input label.focused
{
background-color: #EEEEEE;
font-style: italic;
}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('.input :radio').focus(updateSelectedStyle);
$('.input :radio').blur(updateSelectedStyle);
$('.input :radio').change(updateSelectedStyle);
})
function updateSelectedStyle() {
$('.input :radio').removeClass('focused').next().removeClass('focused');
$('.input :radio:checked').addClass('focused').next().addClass('focused');
}
</script>
The focus and blur hooks are needed to make this work in IE.
For any CSS3-enabled browser you can use an adjacent sibling selector for styling your labels
input:checked + label {
color: white;
}
MDN's browser compatibility table says essentially all of the current, popular browsers (Chrome, IE, Firefox, Safari), on both desktop and mobile, are compatible.
This will get your buttons and labels next to each other, at least. I believe the second part can't be done in css alone, and will need javascript. I found a page that might help you with that part as well, but I don't have time right now to try it out: http://www.webmasterworld.com/forum83/6942.htm
<style type="text/css">
.input input {
float: left;
}
.input label {
margin: 5px;
}
</style>
<div class="input radio">
<fieldset>
<legend>What color is the sky?</legend>
<input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1" />
<label for="SubmitQuestion1">A strange radient green.</label>
<input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2" />
<label for="SubmitQuestion2">A dark gloomy orange</label>
<input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3" />
<label for="SubmitQuestion3">A perfect glittering blue</label>
</fieldset>
</div>