Using text as radio button without using id's or JS - html

Is it possible to have a radio button use text to toggle without using id's or javascript? Could you use the 'class' tag instead? This is not a "you should use javascript or id's", but instead a is it possible to do this without them. Any help would be appreciated in resolving this.

Absolutely! There's nothing stopping you from using class selectors instead of ID selectors.
Here's a simple radio button that toggles text. It uses pure CSS, and makes use of classes:
.switch-field {
font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
padding: 40px;
overflow: hidden;
}
.switch-title {
margin-bottom: 6px;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
float: left;
}
.switch-field label {
display: inline-block;
width: 60px;
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
font-weight: normal;
text-align: center;
text-shadow: none;
padding: 6px 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked + label {
background-color: #A5DC86;
-webkit-box-shadow: none;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
<form class="form">
<div class="switch-field">
<div class="switch-title">Is this awesome?</div>
<input type="radio" id="switch_left" name="switch_2" value="yes" checked/>
<label for="switch_left">Yes</label>
<input type="radio" id="switch_right" name="switch_2" value="no" />
<label for="switch_right">No</label>
</div>
</form>
Hope this helps! :)

Related

input type="radio" - only choose second option?

I have an issue with my radio input.
It lets me change to the second option if im clicking on the label but it doesnt work for the first option. I can only choose the first option if im clicking on the selection-circle but i dont want to display it. It should work with a click on the text.
Any ideas?
.switch-field {
display: flex;
margin-bottom: 36px;
overflow: hidden;
justify-content: center;
}
.switch-field input {
position: absolute;
clip: rect(0, 0, 0, 0);
height: 100px;
width: 100px;
border: 1px;
/* overflow: hidden; */
}
.switch-field label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 10%;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked+label {
background-color: #cc7676;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
<div class="switch-field">
<input type="radio" id="strang1u3" name="switch-one" onchange="speichern(); clicksound()" />
<label for="strang1u2">Strang 1 & 3</label>
<input type="radio" id="strang2u4" name="switch-one" onchange="speichern(); clicksound()" />
<label for="strang2u4">Strang 2 & 4</label>
</div>
Your first label's for (strang1u2) and input's id (strang1u3) don't match. This may be causing this as the label isn't associated with the input.

Toggle button is not working instead it is looking like regular checkbox using css

My toggle button is working if it run in separate webpage where only toggle button included.
But its not working when i put up the same code in form page where many css are included.
/* Checkbox body */
#tog {
display: block;
width: 50px;
height: 28px;
margin: 0px auto;
border-radius: 100px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
background-color: #E6E9EC;
}
#toggly {
display: none;
}
/* The toggle */
.i {
height: 24px;
width: 24px;
background: #ffffff;
display: inline-block;
border-radius: 100px;
margin-top: 2px;
margin-left: 2px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
pointer-events: none;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
#tog:hover> .i {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.20);
transform: scale(1.01);
}
#toggly:checked+ #tog > .i {
margin-left: 24px;
}
#tog :active {
background-color: #A6B9CB;
}
#tog :active> .i {
width: 34px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
}
#toggly:checked+ #tog :active> .i {
margin-left: 18px;
}
#toggly:checked+ #tog {
background-color: #008FFF;
}
<html>
<head>
<title></title>
</head>
<body>
<!-- The Toggle -->
<input type="checkbox" id="toggly" >
<label for="toggly" id="tog"><div class="i"></div></label>
</body>
</html>
The above code is working but if put in form page where many css included its not working.
Can anyone help me out?
Every thing looks fine except for this code below:
.i {
height: 24px;
width: 24px;
background: #ffffff;
display: inline-block;
border-radius: 100px;
margin-top: 2px;
margin-left: 2px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
pointer-events: none;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
cause it might have been overridden so give it a parent id to make it more specific as below:
#tog .i {
height: 24px;
width: 24px;
background: #ffffff;
display: inline-block;
border-radius: 100px;
margin-top: 2px;
margin-left: 2px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
pointer-events: none;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

Different colors on switch button

I have two problems with CSS. Is there a way set different colors for input radio "YES" and "NO"? For example NO with red backgroud and YES with blue background?
How to delete a space between radios?
<div class="switch-field">
<input type="radio" id="resetyes" name="reset" value="YES"/>
<label for="resetyes">YES</label>
<input type="radio" id="resetno" name="reset" value="NO"/>
<label for="resetno">NO</label>
</div>
style.css:
.switch-field {
font-family: Helvetica;
padding: 10px;
overflow: hidden;
}
.switch-title {
margin-bottom: 6px;
}
.switch-field input {
display: none;
}
.switch-field label {
display: inline-block;
width: 60px;
background-color: #F2F0F0;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
font-weight: bold;
text-align: center;
text-shadow: none;
padding: 6px 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked + label {
background-color: #5EA8EE;
-webkit-box-shadow: none;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
https://jsfiddle.net/t2sof0wd/
Just add these css in your code :-
.switch-field input[value="YES"] + label {
background: green;
}
.switch-field input[value="NO"] + label {
background: red;
}
It may help you.
For no space between radios add
font-size:0px;
to switch-field and for backgrounds add this props
#resetyes:checked + label:first-of-type { background-color:green; }
#resetno:checked + label:last-of-type { background-color:red; }
UPDATED FIDDLE
Checkout working snippet below:
.switch-field {
font-family: Helvetica;
padding: 10px;
overflow: hidden;
font-size:0px;
}
.switch-title {
margin-bottom: 6px;
}
.switch-field input {
display: none;
}
.switch-field label {
display: inline-block;
width: 60px;
background-color: #F2F0F0;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
font-weight: bold;
text-align: center;
text-shadow: none;
padding: 6px 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked + label {
background-color: #5EA8EE;
-webkit-box-shadow: none;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
.switch-field input:checked[value="YES"] + label {
background-color: green;
}
.switch-field input:checked[value="NO"] + label {
background-color: red;
}
<div class="switch-field">
<input type="radio" id="resetyes" name="reset" value="YES"/>
<label for="resetyes">YES</label>
<input type="radio" id="resetno" name="reset" value="NO"/>
<label for="resetno">NO</label>
</div>
This fiddle solves the color problem.
I added classes to the labels:
<label class="yes" for="resetyes">YES</label>
...
<label class="no" for="resetno">NO</label>
And used those classes to assign colors:
.switch-field input + label.yes {
background-color: blue;
}
.switch-field input + label.no {
background-color: red;
}
As to your first question, yes, using an attribute selector.
.switch-field input[value="YES"] + label {
background: green;
}
.switch-field {
font-family: Helvetica;
padding: 10px;
overflow: hidden;
}
.switch-title {
margin-bottom: 6px;
}
.switch-field input {
display: none;
}
.switch-field input[value="YES"] + label {
background: green;
}
.switch-field input[value="NO"] + label {
background: red;
}
.switch-field label {
display: inline-block;
width: 60px;
background-color: #F2F0F0;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
font-weight: bold;
text-align: center;
text-shadow: none;
padding: 6px 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked + label {
background-color: #5EA8EE;
-webkit-box-shadow: none;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
<div class="switch-field">
<input type="radio" id="resetyes" name="reset" value="YES"/>
<label for="resetyes">YES</label>
<input type="radio" id="resetno" name="reset" value="NO"/>
<label for="resetno">NO</label>
</div>
As to your second question, the gap is causeed by whitespace in the HTML which affects inline/inline-block elements.
Solutions for this can be found in this SO Question

Make my search box show up in the right position

how do i make the search box in the center of the nav bar? you will see what i mean below with the image.. ill post my css code for the search box below the image ..
#advsearch {
}
#advsearch input[type="text"] {
background: url(/images/search-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial, Helvetica, Sans-serif;
color: #777;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#advsearch input[type="text"]:focus {
width: 200px;
}
thanks so much in advance :) if u want maybe we can work on my website together?
also here is a Js Fiddle just incase you need it dont mind the images not being there it should not make a diffrence
Here you need to modify some css code.
#cssmenu > ul > li > a {
color: #A0A0A0;
font-family: Verdana,'Lucida Grande';
font-size: 15px;
/*line-height: 70px;
padding: 0;*/
position: relative;
top: 7px;
transition: color 0.15s ease 0s;
}
Demo: http://jsfiddle.net/y5Fhc/8/
anchor in not needed in the li of search box and I have added a class in the li of search box to make it center of the nav bar.
css
li.search{
line-height:40px;
}
html
<li class='active search'><span>
<form method="get" action="/search" id="advsearch">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</li>
jsFiddle File

Removing the border on select tag

I made a form for a site and all textboxes have rounded corners except the select drop down box. I made a rounded box style and it shows but the original square also shows behind it. Is there any way I can remove this so my is the only one that shows. I'll add the code
<td>Service Requested:
<select style="margin-left: 10px" name="service" tabindex="4">
<option value=" " selected="selected"> </option>
<option value="Residential Move">Residential Move*</option>
<option value="Commercial Move">Commercial Move*</option>
<option value="Storage Unit Loading">Storage Unit Loading</option>
<option value="Storage Unit Unloading">Storage Unit Unloading</option>
<option value="Furniture Consignment">Furniture Consignment</option>
<option value="Assembly/Removal">Assembly/Removal</option>
<option value="Landscaping">Landscaping</option>
<option value="Cleanout">Cleanout</option>
<option value="General Help">General Help</option>
</select>
</td>
and this is the entire css for the whole form. Just have at it
#searchbox {
padding-left: 190px;
padding-bottom:40px;
background: url(../images/border-dashed.gif) repeat-x left bottom;
}
#searchbox form {
margin: 0;
}
#searchbox table {
margin: 0;
}
#searchbox th, td {
text-align: left;
font-weight: normal;
color:#302f2f;
}
#searchbox .submitrow {
text-align: right;
}
#search {
}
#search input[type="text"] {
border: 2px solid #c1c2c3 ;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #302f2f;
width: 100px;
padding: 6px 15px 6px 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 150px;
}
#search select {
border: 2px solid #c1c2c3 ;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #302f2f;
width: 200px;
padding: 6px 15px 6px 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search select:focus {
width: 250px;
}
#search textarea {
border: 2px solid #c1c2c3 ;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #302f2f;
width: 300px;
padding: 6px 15px 6px 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search textarea:focus {
}
.contactwrapper {width:auto; height:200px; overflow:hidden;}
.extra-wrap {width:800px; overflow:hidden;}
.formbtn {
background: url(../images/formbtns.png) no-repeat;
background-position: 0 bottom;
color: #f1f2ea;
display: block;
line-height: 28px;
float:right;
margin-left:450px;
margin-bottom:40px;
height: 30px;
width: 100px;
margin: 48px 10px;
outline: 0;
text-align: center;
text-decoration: none;
}
.formbtn:hover {
background-position: 0 top;
}
thanks
The ability to style select boxes is inconsistent across browsers. Some of them respond well to CSS styling and some don't, but if you really want to have completely consistent control over it and its behavior, you need to make a faux-select that is powered by javascript.
Check out the Select2 control, it's nice.
Styling to a select box is chosen mostly by the browser and is not very customizable without javascript besides using a background image.
Since jQuery UI 1.8 there has been an autocomplete control that has a combobox functionality which replaces a select control.
I found an alternative, but not sure how it will behave with all browsers. But if you change the border property to inherit it will do it. At least in Chrome
border: 2px inherit #c1c2c3 ;