I'd like something like the JQuery Mobile Flip Toggle Switch, but just that, then I don't want to load all the JQuery Mobile library into my project.
Do you know how to do a nice CSS toggle buttons (more of 2 buttons) like these? I didn't find anything.
Thanks in advance!
PS: I don't care about compability with IE.
Did something quickly. Hope it will help you.
ul.tab {
list-style-type:none;
margin: 0;
padding:0;
border-radius: 5px;
}
ul.tab li {
float: left;
padding: 0;
}
ul.tab li label {
background: white;
padding: 6px;
border: 1px solid #ccc;
display: inline-block;
}
ul.tab li input[type="radio"] {
opacity: 0;
width:1px;
height:1px;
}
ul.tab li input[type="radio"]:checked ~ label {
background: red;
color: white;
}
<ul class="tab">
<li>
<input id="tab1" checked="checked" type="radio" name="tab" />
<label for="tab1">Basic</label>
</li>
<li>
<input id="tab2" type="radio" name="tab" />
<label for="tab2">Options</label>
</li>
<li>
<input id="tab3" type="radio" name="tab" />
<label for="tab3">Methods</label>
</li>
<li>
<input id="tab4" type="radio" name="tab" />
<label for="tab4">Events</label>
</li>
</ul>
Related
I need to get the menu item to remain highlighted when a user clicks on it, of each different page..? It must be CSS only.
CSS:
.topplinker span:hover, .index .shjem, .kontakt .skontakt, .byggdrifter .sbyggdrifter, .om .som {
background-color: #fffcd9;
border-radius: 0 10px 0 0;}
HTML:
<body class="index"><p class="topplinker">
<span class="shjem">Hjem</span>
<span class="skontakt">Kontakt</span>
<span class="sbyggdrifter">Byggdrifter</span>
<span class="som">Om</span>
</p>
So now the code depends on the body class to be unique for each page to work. But I wants it to be working without using the body class to highlight each menu item. Any suggestions..?
Best regards
use ul and li.
then use onclick function to make li active.
Try this one with CSS, If you click on the URL i just change color.
FYI, if pages loads while clicking those url means you have right based on Router URL only.
#toggle1:checked ~ .control-me,
#toggle2:checked ~ .control-me,
#toggle3:checked ~ .control-me,
#toggle4:checked ~ .control-me {
background: violet;
}
.menuitem {
visibility: hidden;
}
<body class="index">
<p class="topplinker">
<a href="javascript:;">
<label>
<input type="radio" name="menuitem" id="toggle1" class="menuitem" />
<span class="control-me shjem">Hjem</span>
</label>
</a>
<a href="javascript:;">
<label>
<input type="radio" name="menuitem" id="toggle2" class="menuitem" />
<span class="control-me skontakt">Kontakt</span>
</label>
</a>
<a href="javascript:;">
<label>
<input type="radio" name="menuitem" id="toggle3" class="menuitem" />
<span class="control-me sbyggdrifter">Byggdrifter</span>
</label>
</a>
<a href="javascript:;">
<label>
<input type="radio" name="menuitem" id="toggle4" class="menuitem" />
<span class="control-me som">Om</span>
</label>
</a>
</p>
</body>
CSS only solution:
.topplinker {
display: flex;
justify-content: space-evenly;
}
a {
text-decoration: none;
color: black;
}
a:active, a:hover {
color: green;
font-weight: bold;
}
/* EDIT */
a:visited {
color: blue;
}
<p class="topplinker">
<span class="shjem">Hjem</span>
<span class="skontakt">Kontakt</span>
<span class="sbyggdrifter">Byggdrifter</span>
<span class="som">Om</span>
</p>
See for more selectors: https://www.w3schools.com/css/css_link.asp
I have a fieldset with check boxes organized with ul, li. I have three lists (all part the same fieldset). I want to display them into three columns, each ul (list) is a column from left to right.
Do I have to wrap each ul in a DIV?... I need help.
Here's what it looks like on my site right now... MaddenUltimateZone.com
<fieldset class="position">
<legend>Position:</legend>
<ul>
<li>Offense</li>
<li>
<input type="checkbox" id="qb" value="QB" />
<label class="position" for="qb">QB</label>
</li>
<li>
<input type="checkbox" id="hb" value="HB" />
<label class="position" for="hb">HB</label>
</li>
<li>
<input type="checkbox" id="fb" value="FB" />
<label class="position" for="fb">FB</label>
</li>
<li>
<input type="checkbox" id="wr" value="WR" />
<label class="position" for="wr">WR</label>
</li>
<li>
<input type="checkbox" id="te" value="TE" />
<label class="position" for="te">TE</label>
</li>
<li>
<input type="checkbox" id="lt" value="LT" />
<label class="position" for="lt">LT</label>
</li>
<li>
<input type="checkbox" id="lg" value="LG" />
<label class="position" for="lg">LG</label>
</li>
<li>
<input type="checkbox" id="c" value="C" />
<label class="position" for="c">C</label>
</li>
<li>
<input type="checkbox" id="rg" value="RG" />
<label class="position" for="rg">RG</label>
</li>
<li>
<input type="checkbox" id="rt" value="RT" />
<label class="position" for="rt">RT</label>
</li>
</ul>
<ul>
<li>Defense</li>
<li>
<input type="checkbox" id="le" value="LE" />
<label class="position" for="le">LE</label>
</li>
<li>
<input type="checkbox" id="re" value="RE" />
<label class="position" for="re">RE</label>
</li>
<li>
<input type="checkbox" id="dt" value="DT" />
<label class="position" for="dt">DT</label>
</li>
<li>
<input type="checkbox" id="lolb" value="LOLB" />
<label class="position" for="lolb">LOLB</label>
</li>
<li>
<input type="checkbox" id="mlb" value="MLB" />
<label class="position" for="mlb">MLB</label>
</li>
<li>
<input type="checkbox" id="rolb" value="ROLB" />
<label class="position" for="rolb">ROLB</label>
</li>
<li>
<input type="checkbox" id="cb" value="CB" />
<label class="position" for="cb">CB</label>
</li>
<li>
<input type="checkbox" id="fs" value="FS" />
<label class="position" for="fs">FS</label>
</li>
<li>
<input type="checkbox" id="ss" value="SS" />
<label class="position" for="ss">SS</label>
</li>
<li>
<input type="checkbox" id="rt" value="RT" />
<label class="position" for="rt">RT</label>
</li>
</ul>
<ul>
<li>Special Teams</li>
<li>
<input type="checkbox" id="k" value="K" />
<label class="position" for="k">K</label>
</li>
<li>
<input type="checkbox" id="p" value="P" />
<label class="position" for="p">P</label>
</li>
</ul>
</fieldset>
</form>
Here's my CSS... maybe something is conflicting.
#filters {
background: #F2F2F2;
border: 1px solid #CCCCCC;
padding: 15px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
fieldset {
border: 1px solid #ccc;
border-radius:4px;
padding: 4px;
display:inline-block;
}
.tier {
float: right;
width: 125px;
}
.position {
float: right;
width: 300px;
margin: 0 10px 0 0;
}
.position ul {
display:inline-block;
vertical-align:top;
}
input[type="radio"],
input[type="checkbox"] { position: absolute; left: -999em; }
label:before {
display: inline-block; position: relative; top:0.25em; left:-2px;
content:''; width:25px; height:25px;
background-image:url(img/formelements.png); }
input[type="checkbox"] + label:before { background-position: 0 -25px;}
input[type="checkbox"]:checked + label:before {background-position: 0 0 ; }
input[type="radio"] + label:before { background-position: -25px -25px;}
input[type="radio"]:checked + label:before { background-position: -25px 0;}
/* Remove the custom styling for IE 7-8 */
.ie8 label:before { display:none; content:none; }
.ie8 input[type="checkbox"],
.ie8 input[type="radio"],
.ie7 input[type="checkbox"],
.ie7 input[type="radio"]{
position: static; left:0; }
.ie8 input[type="checkbox"],
.ie8 input[type="radio"] {
position:relative; top:5px; margin-right:0.5em;}
input[type="text"]:focus, textarea:focus {
border-color:#000;
}
.position ul{
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/w5aFW/1
Hi I am looking to design CSS for html pages and below is m problem. I have two text boxes side by side put in an inline container.
I am now validating the inputs and want to display the error message exactly above the respective text box. So, I have created spans and put them in an inline-container of lesser height and thought of displaying. But the problem is:
Case-1:
The validation message for the second text box shifts left if the length of the error message is short. How do I avoid this?
Case-2:
If the validation message for input text box 1 is long, it is making the error message of text box 2 to shift extreme right. In this case, I want the validation message of text box 1 to be in multiple lines above the area of text box 1
MY HTML:
<div class="inline-container1">
<ul><li><span class="validationMessage"
data-bind="validationMessage: firstName" /></li>
<li><span class="validationMessage"
data-bind="validationMessage: lastName" /></li>
</ul>
</div>
<div id="name" class="inline-container">
<ul>
<li> <input id="firstName"
name="firstName" type="text" class="required-input"
placeholder="First Name *" data-bind="value: firstName" />
</li>
<li> <input id="lastName"
name="lastName" type="text" class="required-input"
placeholder="Last Name *" data-bind="value: lastName" />
</li>
</ul>
</div>
MY CSS:
.inline-container1 ul li{
display: inline;
list-style-type: none;
padding-right: 20px;
min-height: 10px;
margin: 0;
width: 230px;
}
.inline-container1 {
}
.inline-container1 ul
{
list-style-position: outside;
list-style-type: none;
padding: 0;
margin: 0;
}
.validationMessage {
font-family: Arial, sans-serif;
font-size: 12px;
color: #F00;
display: inline;
}
Here is a Fiddle i created to help -> http://jsfiddle.net/Moje/dTvKM/
Fullscreen -> http://jsfiddle.net/Moje/dTvKM/embedded/result/
HTML:
<div class="ctnr">
<span class="vMsg" data-bind="validationMessage: firstName">Val. msg for txtbox 1</span>
<span class="vMsg" data-bind="validationMessage: lastName" >Val. msg for txtbox 2</span>
</div>
<div class="ctnr">
<input id="firstName" name="firstName" type="text" class="required-input" placeholder="First Name *"
data-bind="value: firstName" />
<input id="lastName" name="lastName" type="text" class="required-input" placeholder="Last Name *"
data-bind="value: lastName" />
</div>
CSS:
body{font-family:sans;}
.ctnr > *{ display: inline-block; width: 40%;}
.vMsg{
display:relative;
top:-40px;
border:1px solid red;
color:red;
padding:2px;
}
input[type=text]{-webkit-appearance:none;outline:none;border:none;}
#firstName{border:3px solid black;}
#lastName{border:3px solid red;}
You can tweak it further to suit your needs.
Here is the HTML for my left column:
<div id="leftcolumn">
<ul id="mainnavigation">
<li>Inicio</li>
<li>Evaluaciones</li>
<li>Docentes</li>
<li>Soporte</li>
</ul>
<div id="loginarea">
Username:
<input type="text" name="Username" />
Password:
<input type="password" name="Password" />
<input type="submit" value="Entrar" />
</div>
</div>
And here is my CSS:
#leftcolumn
{
float:left;
position:relative;
top:20px;
left:20px;
}
#leftcolumn ul#mainnavigation
{
font-size:16px;
}
#leftcolumn ul#mainnavigation li
{
padding-top:8px;
}
#leftcolumn ul#mainnavigation li a
{
text-decoration:none;
color:White;
}
#leftcolumn ul#mainnavigation li a:hover
{
text-decoration:underline;
color:Lime;
}
#loginarea
{
margin-top:20px;
}
#loginarea input
{
float:left;
}
I'm trying to have a small login form on that left navigation area and I'd like the label to be on top of their respective textbox.
Any help?
Use labels, this is what they are for
<label for="username">Username:</label>
<input type="text" name="Username" id="username" />
<label for="password">Password:</label>
<input type="password" name="Password" id="password" />
<input type="submit" value="Entrar" />
Then if you make the labels display:block they will line up on top of the inputs
I'm guessing you want the two inputs to be side by side with the label on top. If so, I would use the following HTML:
<div id="form">
<ul>
<li>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</li><li>
<label for="password">Password:</label>
<input type="password" name="password" id="password" />
</li>
</ul>
<input type="submit" value="Entrar" id="submit" /></div>
Then float the list items and add display: block to the labels.
#form {
overflow: hidden;
}
#form li {
width: 180px;
float: left;
margin-right: 10px;
}
#form li label {
font-size: 11px;
font-weight: bold;
display: block;
margin-bottom: 2px;
}
#form #submit {
clear: both;
}
try ths::
<div id="leftcolumn">
<ul id="mainnavigation">
<li>Inicio</li>
<li>Evaluaciones</li>
<li>Docentes</li>
<li>Soporte</li>
</ul>
<div id="loginarea">
<label for="Username">Username:</label>
<input type="text" name="Username" id="Username" />
<label for="Password">Password:</label>
<input type="password" name="Password" id="Password" />
<input type="submit" value="Entrar" />
</div>
</div>
with this css:
#leftcolumn
{
float:left;
position:relative;
top:20px;
left:20px;
}
#leftcolumn ul#mainnavigation
{
font-size:16px;
}
#leftcolumn ul#mainnavigation li
{
padding-top:8px;
}
#leftcolumn ul#mainnavigation li a
{
text-decoration:none;
color:White;
}
#leftcolumn ul#mainnavigation li a:hover
{
text-decoration:underline;
color:Lime;
}
#loginarea
{
margin-top:20px;
}
#loginarea input
{
display:block;
}
#loginarea label {
display:block;
}
Check out this tutorial, really helpfull for dynamic CSS.
http://articles.sitepoint.com/article/fancy-form-design-css
and some of the examples http://designshack.co.uk/articles/10-css-form-examples. They are cross browser too.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I Want some samples for step by step registrations like a wizard.
i want to use these samples and asp.net page.
Thanks.
You can easily create your own using jQuery - check out this demo
http://jsfiddle.net/nwJFs/
And here's the code
HTML
<div class="step step-1">
<div class="wrap">
<label for="name">Name</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Email</label>
<input id="email" type="text" />
</div>
<div class="wrap">
<label for="phone">Phone</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
<div class="step step-2">
<div class="wrap">
<label for="name">Mobile</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Address</label>
<textarea id="email"></textarea>
</div>
<div class="wrap">
<label for="phone">Phone</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
<div class="step step-3">
<div class="wrap">
<label for="name">Some</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Other</label>
<textarea id="email"></textarea>
</div>
<div class="wrap">
<label for="phone">Fields</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Submit</a>
</div>
CSS
body {
font-family: Trebuchet MS;
font-size: 12px;
}
.wrap {
clear: both;
padding: 8px 0;
}
.wrap label {
display: block;
float: left;
width: 150px;
padding: 4px;
line-height: 12px;
}
.wrap input,
.wrap textarea {
display: block;
font-size: 12px;
line-height: 12px;
float: left;
width: 200px;
border: 1px solid #888;
padding: 4px 8px;
}
.button {
background: #333;
color: #f2f2f2;
display: inline-block;
padding: 4px 8px;
text-decoration: none;
border: 1px solid #ccc;
}
.button:hover {
background: #888;
color: #000;
}
br.clear-last {
clear: both;
margin: 15px 0;
}
.step {
display: none;
}
.step-1 {
display: block;
}
jQuery
$(".next").click(function() {
//store parent
var parent = $(this).parent();
if(parent.next().length) {
parent.hide("slow").next().show("slow");
}
return false;
});
$(".prev").click(function() {
var parent = $(this).parent();
if(parent.prev().length) {
parent.hide("slow").prev().show("slow");
}
return false;
});
check out this one : http://thecodemine.org
having problems with chrome though...
Do you mean, something like this?
jQuery Form Builder
checkout these links for better wizard creation:
techlab-smart wizard: http://techlaboratory.net/smartwizard
https://github.com/techlab/SmartWizard