Just wondering if a div can be called without using javascript.
such as
my_div:hover{ add new layout}
is there a version for click eg
my_div:click{add new layout}
Thanks
Yes, if you add tabindex="0" to your div, you make it clickable and can then use the :focus pseudo-class to apply styles.
<div class="clickable" tabindex="0"></div>
.clickable {
height: 100px;
background: blue;
}
.clickable:focus {
background: red;
}
Codepen example. Clicking the div should give it focus and apply the :focus CSS to it. Clicking away from it will unfocus (blur) it and reset the default styles.
Not directly, but you can fake it using checkboxes:
input[type=checkbox] {
display: none;
}
.content {
display: none;
padding: 20px;
background-color: #dadada;
}
input[type=checkbox]:checked+label+.content {
display: block;
}
<input type="checkbox" id="check">
<label for="check">Click me</label>
<div class="content">
<h3>Content</h3>
<p>lorem20</p>
</div>
Related
I'm working on a site that needs to (a) work without JavaScript and (b) be keyboard-accessible.
I have used the label target trick to build a tab view (https://css-tricks.com/functional-css-tabs-revisited/), but I've noticed that it relies on the label being clicked. I can't figure out how to make it work with the keyboard. Is this possible?
.tabs {
background-color: #eee;
min-height: 400px;
}
.tabs__list {
border-bottom: 1px solid black;
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.tabs__tab {
padding: 0.5rem;
}
.tabs__content {
display: none;
left: 0;
padding: 0.5rem;
position: absolute;
top: 100%;
}
.tabs__input {
display: none;
}
.tabs__input+label {
cursor: pointer;
}
.tabs__input:focus,
.tabs__input:hover {
color: red;
}
.tabs__input:checked+label {
color: red;
}
.tabs__input:checked~.tabs__content {
display: block;
}
<div class="tabs">
<ul class="tabs__list">
<li class="tabs__tab">
<input class="tabs__input" type="radio" id="tab-0" name="tab-group" checked>
<label for="tab-0" class="tabs__label" tabindex="0" role="button">Tab 0</label>
<div class="tabs__content">
Tab 0 content
</div>
</li>
<li class="tabs__tab">
<input class="tabs__input" type="radio" id="tab-1" name="tab-group">
<label for="tab-1" class="tabs__label" tabindex="0" role="button">Tab 1</label>
<div class="tabs__content">
Tab 1 content
</div>
</li>
</ul>
</div>
Accepted answer is not an accessible solution.
I have made some corrections and some observations here. Do not use the accepted answer in production if you stumble across this question in the future. It is an awful experience with a keyboard.
The answer below fixes some of the CSS issues to make it more accessible.
However I would recommend you reconsider the no JavaScript requirement.
I can understand having a good fall-back (which the example I give below with the fixes is) but there is no way you can make a fully accessible set of CSS only tabs.
Firstly you should use WAI-ARIA to complement your HTML to make things even more clear for screen readers. See the tabs examples on W3C to see what WAI-ARIA roles you should be using. This is NOT possible without JavaScript as states need to change (aria-hidden for example should change).
Secondly, you should be able to use certain shortcut keys. Press the home key for example in order to return to the first tab, something you can only do with a little JS help.
With that being said here are a few things I fixed with the accepted answer to at least give you a good starting point as your 'no JavaScript fallback'.
Problem 1 - tabindex on the label.
By adding this you are creating a focusable element that cannot be activated via keyboard (you cannot press space or Enter on the label to change selection, unless you use JavaScript).
In order to fix this I simply removed the tabindex from the labels.
Problem 2 - no focus indicators when navigating via keyboard.
In the example the tabs only work when you are focused on the radio buttons (which are hidden). However at this point there is no focus indicator as the styling is applying styling to the checkbox when it is focused and not to its label.
In order to fix this I adjusted the CSS with the following
/*make it so when the checkbox is focused we add a focus indicator to the label.*/
.tabs__input:focus + label {
outline: 2px solid #333;
}
Problem 3 - using the same state for :hover and :focus states.
This is another bad practice that needs to go away, always have a different way of showing hover and focus states. Some screen reader and screen magnifier users will use their mouse to check they have the correct item focused and orientate themselves on a page. Without a separate hover state it is difficult to check you are hovered over a focused item.
/*use a different colour background on hover, you should not use the same styling for hover and focus states*/
.tabs__label:hover{
background-color: #ccc;
}
Example
In the example I have added a hyperlink at the top so you can see where your focus indicator is when using a keyboard.
When your focus indicator is on one of the two tabs you can press the arrow keys to change tab (which is expected behaviour) and the focus indicator will adjust accordingly to make it clear which tab was selected.
.tabs {
background-color: #eee;
min-height: 400px;
}
.tabs__list {
border-bottom: 1px solid black;
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.tabs__tab {
padding: 0.5rem;
}
.tabs__content {
display: none;
left: 0;
padding: 0.5rem;
position: absolute;
top: 100%;
}
.tabs__input {
position: fixed;
top:-100px;
}
.tabs__input+label {
cursor: pointer;
}
.tabs__label:hover{
background-color: #ccc;
}
.tabs__input:focus + label {
outline: 2px solid #333;
}
.tabs__input:checked+label {
color: red;
}
.tabs__input:checked~.tabs__content {
display: block;
}
A link so you can see where your focus indicator is
<div class="tabs">
<ul class="tabs__list">
<li class="tabs__tab">
<input class="tabs__input" type="radio" id="tab-0" name="tab-group" checked>
<label for="tab-0" class="tabs__label" role="button">Tab 0</label>
<div class="tabs__content">
Tab 0 content
</div>
</li>
<li class="tabs__tab">
<input class="tabs__input" type="radio" id="tab-1" name="tab-group">
<label for="tab-1" class="tabs__label" role="button">Tab 1</label>
<div class="tabs__content">
Tab 1 content
</div>
</li>
</ul>
</div>
It is just radio buttons... Keyboard can be used to navigate through them using tab and space bar to check them.
I'd use :focus to highlight the chosen tab and the tabindex property to make it work as I wanted.
Please provide more dept if you have problem with a SPECIFIC problem related to it, and provide a basic code example here, no linking.
Since hidden inputs cannot be selected through keyboard, make them visible...
.tabs {
background-color: #eee;
min-height: 400px;
}
.tabs__list {
border-bottom: 1px solid black;
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.tabs__tab {
padding: 0.5rem;
}
.tabs__content {
display: none;
left: 0;
padding: 0.5rem;
position: absolute;
top: 100%;
}
.tabs__input {
position: fixed;
top:-100px;
}
.tabs__input+label {
cursor: pointer;
}
.tabs__input:focus
.tabs__input:hover {
color: red;
}
.tabs__input:checked+label {
color: red;
}
.tabs__input:checked~.tabs__content {
display: block;
}
<div class="tabs">
<ul class="tabs__list">
<li class="tabs__tab">
<input class="tabs__input" type="radio" id="tab-0" name="tab-group" checked>
<label for="tab-0" class="tabs__label" tabindex="0" role="button">Tab 0</label>
<div class="tabs__content">
Tab 0 content
</div>
</li>
<li class="tabs__tab">
<input class="tabs__input" type="radio" id="tab-1" name="tab-group">
<label for="tab-1" class="tabs__label" tabindex="0" role="button">Tab 1</label>
<div class="tabs__content">
Tab 1 content
</div>
</li>
</ul>
</div>
I know how to collapse (display / hide) a div:
$('#nav').click(function() { $('#hello').toggleClass('hidden'); });
.hidden { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">NAV</div>
<div id="hello" class="hidden">Hello</div>
Is it possible to do this without Javascript / jQuery?
I've tried the main answer from this question, but it is not working, as detailed here.
Nobody has mentioned the 'details' element, which seems perfect for this job.
<details>
<summary>Click to toggle</summary>
<span>Oh, hello</span>
</details>
You may use :checked selector.
#hidden {
display: none;
height: 100px;
background: red;
}
:checked + #hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<div id="hidden"></div>
<label for="my_checkbox">Show/hide</label>
Example fiddle
Well yes, it is, but it's not neat. It involves the :target selector, where you can apply styles to active elements / id's. If we wrap your nav content in a link, we can apply a hashtag which invokes the active rule in our CSS.
Downside, this jumps the page to the location unless prevented by... JavaScript.
a {
color: #000;
text-decoration: none;
}
#hidden {
display: none;
}
#hidden:target {
display: block;
}
<div id="nav">NAV</div>
<div id="hidden">Hello</div>
I m having problem with css of a tooltip. Tooltip belongs to an input field and if an other checkbox is checked, this tooltip needs to be placed correctly on the input field. so the check box is :
<input type="checkbox" id="telefonBox" />
and the input field which tooltip needs to be placed :
<input type="text" class="form-control tooltip-berater" id="agentName"/>
What i tried is
input[id=telefonBox]:checked + .tooltip-berater + .tooltip > .tooltip-inner {top: 875px !important; left: 30px; max-width:300px;}
(Basically i m trying to write: if a checkbox with this id checked, then do some stuff in this css classes)
But doesnt function at all. What am i missing?
If both inputs are children of the same div, but not directly next to each other (in the HTML markup) then you need to use ~ operator instead of +.
+ works like:
<div class="parent">
<div class="first"></div>
<div class="second></div>
</div
.first + .second {
// do stuff with second
}
~ works like:
<div class="parent">
<div class="first"></div>
<div class="inbetween"></div>
<div class="second"></div>
</div
.first ~ .second {
// you can still do stuff with second
}
There is no selector which would help you in other cases possible in your HTML markup, especially:
When .second div is placed earlier than .first
When .second div has different parent from .first
In those cases you will need to use JavaScript to select and change your element's CSS.
Heres a fiddle i made that changes colour of input box: https://jsfiddle.net/8we5u1vs/
Is that the kind of thing you want? Obviously its much simpler than what you're talking about. You havnt added much code so hard to tell, could you show code or fiddle for an example of the tooltip?
input[id=telefonBox]:checked + .tooltip-berater {
background-color:red;
}
You can try this way, but text input is still available via tab key.
div {
display: inline-block;
position: relative;
line-height: 1.25em;
border: 1px solid;
background: white;
}
input[type=text] {
border: 1px solid white;
line-height: inherit;
}
span {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
text-align: center;
display: none;
border: 1px solid white;
background: white;
}
input[type=checkbox]:checked + div span {
display: block;
}
<input type=checkbox>
<div>
<input type=text>
<span>N/A</span>
</div>
I have a problem, I have this input text fields in a html form, this are wrapped for this div css properties:
.formRight240 { float: left; width: 240px; margin: 5px 12px 5px 0px; }
when I try to this
.field_required{ display: inline; color: red; }
.field_required:after{ content: "*" }
the input text field stay the same and the asterisk jump to the next line, I know the reason, everything is aligned in order to the other elements around, but is there anything I can do to display the asterisk inline with the input text field by doing changes to the field_required class? if not, what I have to change to the .formRight240.
HTML
<div class="rowElem noborder">
<label>Customer ID:</label>
<div class="formRight240">
<span class="field_required"><input type="text" name="p_cust_id_c" id="req" class="validate[required,maxSize[30]]"/></span>
</div>
<div class="fix"></div>
</div>
Check this answer, you can't add :before or :after to an input.
A solution could be to wrap your input in a span:
HTML
<span class="field_required"><input type="text" /><span>
CSS
.field_required input {
display: inline;
color: red;
}
.field_required:after{
content: "*";
}
DEMO
I use anchor as my site navigation.
<div id='nav'>
<a href='#abouts'>
<div class='navitem about'>
about
</div>
</a>
<a href='#workss'>
<div class='navitem works'>
works
</div>
</a>
</div>
The CSS
#nav {
margin-left: 50px;
margin-top: 50px;
text-transform: uppercase;
}
.navitem {
background: #333;
color: white;
width: 230px;
height: 50px;
font-size: 25px;
line-height: 50px;
padding-left: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-top: 10px;
}
.about:hover {
background: #cc00ff;
}
.about:active {
background: #ff00ff;
color: #000;
width: 250px;
}
.works:hover {
background: #0066FF;
}
.works:active {
background: #0099cc;
color: #000;
width: 250px;
}
I'm wondering how to keep the div element style keep in the :active state once after the click until I hit another nav bar item, so how to do it?
Combine JS & CSS :
button{
/* 1st state */
}
button:hover{
/* hover state */
}
button:active{
/* click state */
}
button.active{
/* after click state */
}
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});
The :target-pseudo selector is made for these type of situations: http://reference.sitepoint.com/css/pseudoclass-target
It is supported by all modern browsers. To get some IE versions to understand it you can use something like Selectivizr
Here is a tab example with :target-pseudo selector.
I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
To make button change content:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
Hope it helps!!
You can use a little bit of Javascript to add and remove CSS classes of your navitems. For starters, create a CSS class that you're going to apply to the active element, name it ie: ".activeItem". Then, put a javascript function to each of your navigation buttons' onclick event which is going to add "activeItem" class to the one activated, and remove from the others...
It should look something like this: (untested!)
/*In your stylesheet*/
.activeItem{
background-color:#999; /*make some difference for the active item here */
}
/*In your javascript*/
var prevItem = null;
function activateItem(t){
if(prevItem != null){
prevItem.className = prevItem.className.replace(/{\b}?activeItem/, "");
}
t.className += " activeItem";
prevItem = t;
}
<!-- And then your markup -->
<div id='nav'>
<a href='#abouts' onClick="activateItem(this)">
<div class='navitem about'>
about
</div>
</a>
<a href='#workss' onClick="activateItem(this)">
<div class='navitem works'>
works
</div>
</a>
</div>
If you want to keep your links to look like they are :active class, you should define :visited class same as :active so if you have a links in .example then you do something like this:
a.example:active, a.example:visited {
/* Put your active state style code here */ }
The Link visited Pseudo Class is used to select visited links as says the name.