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
Related
I need to match the selectors that I put down in the image but I can't find any css property to do it
The point is that I need that when the input-radio is checked the button is seen in another color, any css expert that can help me?
Thanks
<div class="radio" id="uniform-28">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_1" value="28" id="28"></span>
</div>
<label for="28">5/6</label>
enter image description here
You cannot select parent elements via css, therefor you have to use script and toggle element classes. One way to do it:
$('.attribute_radio').each(function(i) {
var thisRadio = $(this);
var thisName = thisRadio.attr('name');
var groupRadios = $('.attribute_radio[name='+thisName+']');
thisRadio.on('change', function() {
groupRadios.each(function(j) {
var thatRadio = $(this);
thatRadio.closest('.radio').toggleClass('radio_checked', thatRadio.is(':checked'));
/* You could also target the label itself this way: */
var labelId = thatRadio.attr('id');
var thatLabel = $('label[for='+labelId+']');
thatLabel.toggleClass('label_checked', thatRadio.is(':checked'));
});
}).trigger('change');
});
.radio {
display: none;
}
.radio + label {
display: inline-block;
padding: 10px 14px;
min-width: 50px;
background: #ddd;
color: #444;
border: 3px solid #444;
border-radius: 6px;
}
.radio_checked + label {
background: yellow;
}
.label_checked {
/* Any styles */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
Group 1
</p>
<div class="radio" id="uniform-27">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_1" value="27" id="27">
</span>
</div>
<label for="27">4</label>
<div class="radio" id="uniform-28">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_1" value="28" id="28" checked="checked">
</span>
</div>
<label for="28">5/6</label>
<p>
Group 2
</p>
<div class="radio" id="uniform-37">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_2" value="37" id="37" checked="checked">
</span>
</div>
<label for="37">XS</label>
<div class="radio" id="uniform-38">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_2" value="38" id="38">
</span>
</div>
<label for="38">S</label>
Also on JSFiddle.
I think you should restructure your DOM and that will make it easy for you to apply CSS.
How about this?
<div class="radio" id="uniform-28">
<span class="checked">
<input type="radio" class="attribute_radio" name="group_1" value="28" id="28"/>
<label for="28">5/6</label>
</span>
</div>
And then you can apply style you want
.checked label {
background-color: yellow;
}
This way you don't have to do extra wotk with JS and CSS.
Also you might have to change your existing CSS if you want use above HTML.
Working on converting some of the forms on our website to be housed within our new emailing platform (Pardot, a part of Salesforce). Using their CSS editor to create the forms, but I don't have much experience in CSS. I got all the labels for a checkbox to align vertically, but they're in a diagonal line instead of a vertical line. Any tips on how to fix that?
I also attached an image of what the form looks like on the website.
Here's the CSS:
pardot-form input[type="checkbox"] {
background-color: #fff;
color: #666;
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 1.75em;
height:18px;
width:18px;
padding:0;
margin-top:5px;
display:block;
float:left;
}
Will this work for you? I pulled some basic form elements from an existing Pardot form.
form.form input[type="checkbox"] {
background-color: #fff;
color: #666;
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 1.75em;
height: 18px;
width: 18px;
padding: 0;
margin-top: 5px;
display: inline;
}
<form class="form">
<p class="form-field company col-sm-12 Main_Alarm_Equipment_Used pd-checkbox required required-custom ">
<label class="field-label" for="1">Which mailing lists would you like to sign up for? (Check all that apply)*</label>
<span class="value"> <span>
<input type="checkbox" name="2" id="2" value="598212" onchange="">
<label class="inline" for="2">General Information</label>
</span> <span>
<input type="checkbox" name="3" id="3" value="598214" onchange="">
<label class="inline" for="3">Membership</label>
</span> <span>
<input type="checkbox" name="4" id="4" value="598216" onchange="">
<label class="inline" for="4">Alumni</label>
</span> <span>
<input type="checkbox" name="5" id="5" value="598218" onchange="">
<label class="inline" for="5">Show</label>
</span> <span>
<input type="checkbox" name="6" id="6" value="598220" onchange="">
<label class="inline" for="6">Band</label>
</span> </span> </p>
</form>
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>
I'm trying to make this CSS be flexible and use in an HTML table and be able to only change the element in focus without using JavaScript -- but because of the selectors, it is only changing the first element. I'm not the best CSS developer.
I understand that using the "for=" and repeating the ids of the checkboxes we are rendering invalid HTML, but I was wondering if there was a way around it. I tried to give each parent span a unique id and generate separate classes for them, as well as the labels. but that seemed like it could be an unnecessary amount of work.
Previously I had no use to include these in a table, except now I do.
Is there an easy/flexible approach to making this possible?
See my example here.
CSS
.checkbox-on-off {
position: relative;
display: inline-block;
width: 35px;
padding-right: 2px;
overflow: hidden;
vertical-align: middle;
margin-top: 10px;
}
.checkbox-on-off input[type=checkbox] {
position: absolute;
opacity: 0;
}
.checkbox-on-off input[type=checkbox]:checked+label {
background-color: lightblue;
}
.checkbox-on-off label {
display: inline-block;
border: 1px solid transparent;
height: 15px;
width: 100%;
background: #b8b8b8;
cursor: pointer;
border-radius: 20px;
}
.checkbox-on-off input[type=checkbox]:checked+label .checked {
display: inline-block;
margin-top: 3px;
margin-left: 6px;
background: no-repeat url('img/www-hitchhiker-vflAhaHWR.png') -421px -78px;
background-size: auto;
width: 10px;
height: 10px;
}
.checkbox-on-off label .checked {
display: none;
}
.checkbox-on-off input[type=checkbox]:checked+label .unchecked {
display: none;
}
.checkbox-on-off label .unchecked {
display: inline-block;
float: right;
padding-right: 3px;
}
.checkbox-on-off input[type=checkbox]:checked+label .toggle {
float: right;
}
.checkbox-on-off label .toggle {
float: left;
background: #fbfbfb;
height: 15px;
width: 13px;
border-radius: 20px;
}
HTML
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>
Yes, the way around it is to have the inputs inside of the label element:
<label>
<input type="checkbox">
Some Checkbox 1
</label>
<label>
<input type="checkbox">
Some Checkbox 2
</label>
So clicking anywhere inside the label will now toggle the checkbox that is also nested inside that label. Now you don't need for for= attribute on the label.
trying to get the nth-child/first-child working
on the first label within the form below
but can't get it right
At the moment I'm using
form label {
display: block;
font-size: 20px;
font-size: 2rem;
line-height: 18px;
cursor: pointer;
margin:0 auto;
color:#FFF;
text-transform:uppercase;
padding:40px 0 10px;
font-weight: normal!important;
}
label:first-child {
padding-top:0;
}
but have used
form code div.field span.lspan label:nth-of-type(1)
form code div.field span.lspan label:first-child
.lspan label:first-child
form label:first-child
they set all labels in the form to padding 0
<form method="POST" action="" class="">
<div class="field">
<span class="lspan"><label for="sender_name">Name</label></span>
<span class="inspan"><input class="hinput" type="text" name="sender_name" value=""></span>
</div>
<div class="field">
<span class="lspan"><label for="sender_name">Email</label></span><span class="inspan"> <input class="hinput" type="text" name="email" value=""> </span></div>
<div class="field">
<span class="lspan"><label for="subject">Subject</label></span><span class="inspan"><input class="hinput" type="text" name="subject" value=""></span></div>
<div class="field">
<span class="lspan"><label for="sender_name">Message</label></span><span class="inspan"> <textarea class="htextarea" name="message"></textarea></span></div>
<div class="field">
</div>
<div class="field" style="margin-top:15px">
<input type = "submit" class="csubmit" name = "submit" value="Submit" style="" />
</div>
</form>
Thanks
Roy
All the <label> tags in your code are a first-child of their respective <span> element.
If you only want to target the first appearance of a <label> in your code use this:
form div:first-child label {
padding: 0;
}
This will target any label within the <div> element, that is the first-child of the form.
Remember, that you can use :first-child on any subselektor and not just on the outermost right!