I'm making an information section with three dropdown options 'Course Length' 'Pricing' and 'Cancellations'
See it here live
For some reason, the checboxes can only be clicked in series (i.e. I cannot click to expand 'Cancellations' unless I have expanded 'Course Length' and 'Pricing' - in that order)
I'd like the user to be able to click these in any order they like. I believe it is a formatting issue, as the cursor changes when hovering slightly to the right of the arrow img
HTML and CSS:
.accordion {
width: 95%;
max-width: 400px;
margin: auto;
}
.accordion label {
display: block;
margin: auto;
text-align: center;
cursor: pointer;
}
.arrow img {
padding-left: 6px;
height: 15px;
}
.accordion p {
text-align: left;
visibility: none;
height: 0;
opacity: 0;
transition: .5s;
-webkit-transition: .5s;
}
#tm:checked ~ .hiddentext {
visibility: visible;
height: auto;
opacity: 1;
}
input#tm {
display: none;
position: relative;
}
#tn:checked ~ .hiddentext {
visibility: visible;
height: auto;
opacity: 1;
}
input#tn {
display: none;
position: relative;
}
#to:checked ~ .hiddentext {
visibility: visible;
height: auto;
opacity: 1;
}
input#to {
display: none;
position: relative;
}
<div class="accordion">
<label for="tm" class="accordionitem">
<h3 class="font">Course Length<span class="arrow"><img src="images/arrow.svg" /></span></h3>
</label>
<input type="checkbox" id="tm" />
<p class="hiddentext font">
Term - 16 Weeks
<br>Days - Monday to Tuesday 6-9pm
<br>Location - Levels Newton Academy
</p>
</div>
<div class="accordion">
<label for="tn" class="accordionitem">
<h3 class="font">Pricing
<span class="arrow">
<img src="images/arrow.svg" />
</span>
</h3>
</label>
<input type="checkbox" id="tn" />
<p class="hiddentext font">
Cost - £2,400
<br>Deposit required to secure place.
<br>Financial plans available. Please contact us for more information.
</p>
</div>
<div class="accordion">
<label for="to" class="accordionitem">
<h3 class="font">Cancellations<span class="arrow"><img src="images/arrow.svg" /></span></h3>
</label>
<input type="checkbox" id="to" />
<p class="hiddentext font">
We understand situations can arise and be out of your control, thats’s why you have until 21 days prior to your start date to receive a full refund if you need to cancel. There is a 20% cancellation charge on the amount already paid, then a full refund of what’s remaining. Any changes after 21 days and we can only offer a course date change, not a refund.
</p>
</div>
The problem is your p.hiddentext is placed on top of the next label that is why your labels are not clickable. Just place your label's on top of the p tag and it should work fine. Try adding the following CSS:
.accordion label {
position: relative;
z-index: 9;
}
Here's the actual 'Swticher' Generator: https://proto.io/freebies/onoff/
I'm not clear on how to add text to the event - so when the switch is on default certain text is shown and vica versa.
Here's the HTML:
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
I tried to add the class to a < p > tag but no joy.
Thanks for all help.
You can copy paste the css used by the site through DevTools. Anyways, what they do is, initially they set the checkbox to checked which makes the margin-left to be 0 which shows the ::before pseudo-element that has "ON" text. And on not checked, margin-left is set to -100% which shows ::after pseudo-element that has "OFF" text.
Here's the relevant CSS -
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-inner::before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1;
color: #FFFFFF;
}
.onoffswitch-inner::after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
Here's the entire code in JSFiddle - https://jsfiddle.net/0f4rbLmo/1/
Edit:
If you want to toggle a div based on the switch, you can define hidden class like -
.triggeredDiv.hidden {
display: none;
}
And then trigger it based on checkbox value in javascript when event is fired.
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
document.querySelector('.triggeredDiv').classList.remove('hidden');
} else {
document.querySelector('.triggeredDiv').classList.add('hidden');
}
}
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
JSFiddle - https://jsfiddle.net/g7qm2txs/
I have the following template deisgned to display a listview. But the items in the list assign a background color of black by default. I am not able to override their BG color property. I have experience in native WP developement using C#. But in HTML 5 and WinJS am not able to figure out half the things about design.
HTML Code:
<div id="pivotScenario3" data-win-control="WinJS.UI.Pivot" data-win-options="{ selectedIndex: 4 }">
<div id="listViewMenu" class="listviewpivotitem" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'SPORTS' }">
<div data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: All.dataSource, layout: { type: WinJS.UI.ListLayout }, itemTemplate: menuItemTemplate, selectionMode: 'none' }"></div>
</div>
Template code:
<div id="menuItemTemplate" data-win-control="WinJS.Binding.Template">
<div class="menuItem">
<table>
<tr>
<td>
<img data-win-bind="src: logo" alt="Databound image" class="logo" />
</td>
<td>
<div class="selectionmodeHitTarget win-interactive"></div>
<div class="sportNameRoot">
<h2 class="sportName" data-win-bind="innerHTML: sportName"></h2>
</div>
</td>
</tr>
</table>
</div>
</div>
CSS:
.menuItem {
display: -ms-grid;
-ms-grid-columns: 20px 1fr 60px;
-ms-grid-rows: auto auto auto;
background-color: transparent;}
.menuItem .selectionmodeHitTarget {
/* So it is stacked on top of other grid elements */
position: relative;
z-index: 1;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 3;
width: 16px; /* reserve 4px gap between highlight and item edge */
height: 100%;
transition: background-color 250ms ease-out 250ms, visibility 0ms linear 500ms, transform cubic-bezier(0.17,0.79,0.215,1.0025) 250ms;
}
.menuItem .selectionmodeHitTarget:active {
transition: background-color ease-out 100ms; /* fade in fast */
background-color: Highlight;
}
.menuItem .selectionmodeHitTarget:after {
margin: 0 16px;
width: 16px;
height: 100%;
content: '';
}
.win-selectionmode .menuItem .selectionmodeHitTarget {
transform: translateX(-41px); /* delayed by transition */
visibility: hidden;}
.win-selectionmode .win-item {
overflow: visible;}
CSS for pivot n listview
.listviewpivotitem.win-pivot-item .win-pivot-item-content {
/* Stretch across the whole width of the screen so the whole thing is pannable.*/
padding: 0;
margin: 0;
width: 100%;}
.win-listview {
height: 100%;}
#pivotScenario3 .win-listview .win-container {
margin: 0;
padding: 5px 0 0 0;
background-color: transparent;}
#pivotScenario3 .win-listview.win-rtl .win-item {
margin: 0 0 0 20px;}
#pivotScenario3{
color:white;}
My need is that, i want to set any desired color as background color for listview items.
I know this is a lot of code to go through but my problem is too complicated. Haven't found a solution since a week. This is my last resort.
All help, suggestions and answers are appreciated!
Bind color code with style property
like:
<div data-win-bind="style.background:Color"></div>
it will give you the expected result.
All the Best..!!
Made a web portfolio. Around my name there is contact data. Initial width of text is 0, when hovering the icons expand with the "transition" property. Icons on the left work fine, but those on the right have a weird transition, especially the phone.
http://jsfiddle.net/4y9eW/
<div class="contactbox left">
<a href="https://twitter.com/D4NiMG" class="contactchild" id="contacttwittertext">
<span class="contacticon-twitter"></span>
<span class="contacttext">#D4NiMG</span>
</a>
<a href="https://plus.google.com/+DaniMu%C3%B1ozGuardiola" class="contactchild" id="contactgoogleplustext">
<span class="contacticon-google-plus"></span>
<span class="contacttext">+DaniMuñozGuardiola</span>
</a>
</div>
<span id="titlespan">Dani Guardiola</span>
<div class="contactbox right">
<a href="mailto:d4nimg#gmail.com" class="contactchild" id="contactemailtext">
<span class="contacticon-email"></span>
<span class="contacttext">d4nimg#gmail.com</span>
</a>
<a href="tel:+34607017025" class="contactchild" id="contactphonetext">
<span class="contacticon-phone"></span>
<span class="contacttext">+34 607 01 70 25</span>
</a>
</div>
CSS:
.contacttext {
display: none;
white-space: nowrap;
}
.contactchild:hover .contacttext {
display: inline-block;
}
.contactchild {
position: relative;
display: inline-block;
overflow: hidden;
width: 32px;
color: white;
transition: width 0.3s;
}
#contacttwittertext:hover {
transition: width 0.3s;
width: 107px;
color: #00aced;
}
#contactgoogleplustext:hover {
transition: width 0.3s;
width: 189px;
color: #D34836;
}
#contactemailtext:hover {
transition: width 0.3s;
width: 175px;
color: #8036d3;
}
#contactphonetext:hover {
transition: width 0.3s;
width: 154px;
color: #6fd336;
}
The problem with the phone is that the text wraps. Set
.contactchild { white-space: nowrap }
The weird overlap is caused by your misuse of position: absolute. Get rid of that. Move it around with margins, the parent forcing nowrap.
The weird underscores has to do with the spaces in the HTML. See 1 vs 2. It's <a>'s underline (note the spaces).
Is there a way to control the size of the radio button in CSS ?
This css seems to do the trick:
input[type=radio] {
border: 0px;
width: 100%;
height: 2em;
}
Setting the border to 0 seems to allow the user to change the size of the button and have the browser render it in that size for eg. the above height: 2em will render the button at twice the line height. This also works for checkboxes (input[type=checkbox]). Some browsers render better than others.
From a windows box it works in IE8+, FF21+, Chrome29+.
Old question but now there is a simple solution, compatible with most browsers, which is to use CSS3. I tested in IE, Firefox and Chrome and it works.
input[type="radio"] {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
transform: scale(1.5);
}
Change the value 1.5, in this case an increment of 50% in size, according to your needs. If the ratio is very high, it can blur the radio button. The next image shows a ratio of 1.5.
You can control radio button's size with css style:
style="height:35px; width:35px;"
This directly controls the radio button size.
<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">
A solution which works quite well is described right here:
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/radio
The idea is to use the appearance property, which when set to none allows to change the width and height of the radio button.
The radio buttons are not blurry, and you can add other effects like transitions and stuff.
Here's an example :
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #999;
transition: 0.2s all linear;
margin-right: 5px;
position: relative;
top: 4px;
}
input:checked {
border: 6px solid black;
outline: unset !important /* I added this one for Edge (chromium) support */
}
The only drawback is that it is not supported yet on IE.
Here's a GIF below to give an idea of what can be achieved. The result will look nicer on an actual browser.
And the plunker : https://plnkr.co/plunk/1W3QXWPi7hdxZJuT
Not directly. In fact, form elements in general are either problematic or impossible to style using CSS alone. the best approach is to:
hide the radio button using javascript.
Use javascript to add/display HTML that can be styled how you like e.g.
Define css rules for a selected state, which is triggered by adding a class "selected" to yuor span.
Finally, write javascript to make the radio button's state react to clicks on the span, and, vice versa, to get the span to react to changes in the radio button's state (for when users use the keyboard to access the form). the second part of this can be tricky to get to work across all browsers. I use something like the following (which also uses jQuery. I avoid adding extra spans too by styling and applying the "selected" class directly to the input labels).
javascript
var labels = $("ul.radioButtons).delegate("input", "keyup", function () { //keyboard use
if (this.checked) {
select($(this).parent());
}
}).find("label").bind("click", function (event) { //mouse use
select($(this));
});
function select(el) {
labels.removeClass("selected");
el.addClass("selected");
}
html
<ul class="radioButtons">
<li>
<label for="employee1">
employee1
<input type="radio" id="employee1" name="employee" />
</label>
</li>
<li>
<label for="employee2">
employee1
<input type="radio" id="employee2" name="employee" />
</label>
</li>
</ul>
Resizing the default widget doesn’t work in all browsers, but you can make custom radio buttons with JavaScript. One of the ways is to create hidden radio buttons and then place your own images on your page. Clicking on these images changes the images (replaces the clicked image with an image with a radio button in a selected state and replaces the other images with radio buttons in an unselected state) and selects the new radio button.
Anyway, there is documentation on this subject. For example, read this: Styling Checkboxes and Radio Buttons with CSS and JavaScript.
Here's one approach. By default the radio buttons were about twice as large as labels.
(See CSS and HTML code at end of answer)
Safari: 10.0.3
Chrome: 56.0.2924.87
Firefox: 50.1.0
Internet Explorer: 9 (Fuzziness not IE's fault, hosted test on netrenderer.com)
CSS:
.sortOptions > label {
font-size: 8px;
}
.sortOptions > input[type=radio] {
width: 10px;
height: 10px;
}
HTML:
<div class="rightColumn">Answers
<span class="sortOptions">
<input type="radio" name="answerSortList" value="credate"/>
<label for="credate">Creation</label>
<input type="radio" name="answerSortList" value="lastact"/>
<label for="lastact">Activity</label>
<input type="radio" name="answerSortList" value="score"/>
<label for="score">Score</label>
<input type="radio" name="answerSortList" value="upvotes"/>
<label for="upvotes">Up votes</label>
<input type="radio" name="answerSortList" value="downvotes"/>
<label for="downvotes">Down Votes</label>
<input type="radio" name="answerSortList" value="accepted"/>
<label for="downvotes">Accepted</label>
</span>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
input[type="radio"] {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="container">
<h2>Form control: inline radio buttons</h2>
<p>The form below contains three inline radio buttons:</p>
<form>
<label class="radio-inline">
<input type="radio" name="optradio">Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 3
</label>
</form>
</div>
</body>
</html>
Well, I am from the future as compared to the posted year of this question, but I believe my answer will benefit all the new visitors:
So if you want to increase the size of the "radio" button with CSS you can simply do it by putting the following styling rules in CSS and it will help you,
input[radio] {
height: 20px;
width: 20px;
vertical-align: middle;
}
This works fine for me in all browsers:
(inline style for simplicity...)
<label style="font-size:16px;">
<input style="height:1em; width:1em;" type="radio">
<span>Button One</span>
</label>
The size of both the radio button and text will change with the label's font-size.
Directly you can not do this. [As per my knowledge].
You should use images to supplant the radio buttons. You can make them function in the same manner as the radio buttons inmost cases, and you can make them any size you want.
You can also use the transform property, with required value in scale:
input[type=radio]{transform:scale(2);}
(Vue3) HTML:
<h2>Group By</h2>
<div class="radioButtons">
<label><input type="radio" id="groupByDevice"
v-model="data.groupBy" value="device" />
<span>Device Location</span>
</label>
<label><input type="radio" id="groupByLocation"
v-model="data.groupBy" value="location" />
<span>Device Type</span></label>
</div>
</div>
SASS:
$vw-viewport: 2400px;
#function toVw($vw-viewport, $value) {
#return ($value / $vw-viewport) * 100vw;
}
label {
font-size: toVw($vw-viewport, 16px);
line-height: toVw($vw-viewport, 18px);
}
.radioButtons {
> label {
white-space: no-wrap;
display: inline-block;
height: toVw($vw-viewport, 22px);
margin: 0 toVw($vw-viewport, 10px) toVw($vw-viewport, 5px) 0;
> input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
border-radius: 50%;
width: toVw($vw-viewport, 18px);
height:toVw($vw-viewport, 18px);
border: toVw($vw-viewport,2px) solid #747474;
margin: 0;
position: relative;
top: toVw($vw-viewport, 2px);
background: white;
&::after {
content: '';
position: absolute;
top: 12.5%;
left: 12.5%;
right: 12.5%;
bottom: 12.5%;
width: auto;
height: auto;
background: rgb(80, 95, 226);
opacity: 0;
border-radius: 50%;
transition: 0.2s opacity linear;
}
&:checked {
&::after {
opacity: 1 !important;
background: rgb(80, 95, 226) !important;
}
}
}
&:hover {
cursor: pointer;
> input[type=radio]::after {
opacity: 1;
background: #cfd1e2;
}
}
> span {
display: inline-block;
position: relative;
top: toVw($vw-viewport, -1px);
padding-left: toVw($vw-viewport, 7px);
}
}
}
The result is like this. On hover, a gray dot appears as well. The labels will wrap horizontally when there is room, there was not enough room here so they stack. This scales with the page. If you don't need that, remove the SASS function and use the pixels directly. This is a case where !important is being used correctly IMHO, in this case to override hover when the radio is checked.
try this code... it may be the ans what you exactly looking for
body, html{
height: 100%;
background: #222222;
}
.container{
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
}
h2 {
color: #AAAAAA;
}
.container ul{
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
}
ul li{
color: #AAAAAA;
display: block;
position: relative;
float: left;
width: 100%;
height: 100px;
border-bottom: 1px solid #333;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label{
color: #FFFFFF;
}
ul li .check{
display: block;
position: absolute;
border: 5px solid #AAAAAA;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #FFFFFF;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
border: 5px solid #0DFF92;
}
input[type=radio]:checked ~ .check::before{
background: #0DFF92;
}
<ul>
<li>
<input type="radio" id="f-option" name="selector">
<label for="f-option">Male</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="s-option" name="selector">
<label for="s-option">Female</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="t-option" name="selector">
<label for="t-option">Transgender</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
<html>
<head>
</head>
<body>
<style>
.redradio {border:5px black solid;border-radius:25px;width:25px;height:25px;background:red;float:left;}
.greenradio {border:5px black solid;border-radius:25px;width:29px;height:29px;background:green;float:left;}
.radiobuttons{float:left;clear:both;margin-bottom:10px;}
</style>
<script type="text/javascript">
<!--
function switchON(groupelement,groupvalue,buttonelement,buttonvalue) {
var groupelements = document.getElementById(groupelement);
var buttons = groupelements.getElementsByTagName("button");
for (i=0;i<buttons.length;i++) {
if (buttons[i].id.indexOf("_on") != -1) {
buttons[i].style.display="none";
} else {
buttons[i].style.display="block";
}
}
var buttonON = buttonelement + "_button_on";
var buttonOFF = buttonelement + "_button_off";
document.getElementById(buttonON).style.display="block";
document.getElementById(buttonOFF).style.display="none";
document.getElementById(groupvalue).value=buttonvalue;
}
// -->
</script>
<form>
<h1>farbige Radiobutton</h1>
<div id="button_group">
<input type="hidden" name="button_value" id="button_value" value=""/>
<span class="radiobuttons">
<button type="button" value="OFF1" name="button1_button_off" id="button1_button_off" onclick="switchON('button_group','button_value','button1',this.value)" class="redradio"></button>
<button type="button" value="ON1" name="button1_button_on" id="button1_button_on" style="display:none;" class="greenradio"></button>
<label for="button1_button_on"> Ich will eins</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF2" name="button2_button_off" id="button2_button_off" onclick="switchON('button_group','button_value','button2',this.value)" class="redradio"></button>
<button type="button" value="ON2" name="button2_button_on" id="button2_button_on" style="display:none;" class="greenradio"></button>
<label for="button2_button_on"> Ich will zwei</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF3" name="button3_button_off" id="button3_button_off" onclick="switchON('button_group','button_value','button3',this.value)" class="redradio"></button>
<button type="button" value="ON3" name="button3_button_on" id="button3_button_on" style="display:none;" class="greenradio"></button>
<label for="button3_button_on"> Ich will drei</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF4" name="button4_button_off" id="button4_button_off" onclick="switchON('button_group','button_value','button4',this.value)" class="redradio"></button>
<button type="button" value="ON4" name="button4_button_on" id="button4_button_on" style="display:none;" class="greenradio"></button>
<label for="button4_button_on"> Ich will vier</label>
</span>
</div>
</form>
</body>
</html>