I was thinking that there's only two ways to focus element - using JavaScript, or in case it's a div with an contenteditable attribute. But this time I tried something different: I tried to effect input[type="text"] within a div (without contenteditable) using the parent.
I know that when a child element is focused, the parent is focused too - I mean, If I have the following example:
<form action="/" method="get">
<input type="text" placeholder="Hi I'm Text!" />
</form>
When I focus on the textbox, the form will be focused too. I can do the following:
form input[type="text"]:focus {
/* CSS goes here */
}
But I can not do something like this:
form:focus > input[type="text"] {
/* The same CSS goes here */
}
I already solved my own problem, but I wonder why it can not work this way. As I said (and feel free to correct me if I'm wrong) - when I focus on the input, I'm automatically focusing the parent element too (and it's own parent element, etc.) So why can't I simply use :focus on the parent, and then effect the child?
You can't focus on a form element. If you want, you can add it the tabindex attribute, such as <form tabindex="0">.
Forms are containers for controls and as such not expected to be getting direct user interaction.
According to W3C, users should interact with forms using controls.
Reference:
https://www.w3.org/TR/html401/interact/forms.html#form-controls
Related
I have a component that, upon a hover, shows a button and a link that you can click on. This is not a menu... just a box in the middle of the page.
For accessibility, I would like a user to be able to tab into the container (happens now, and displays the content in the .HiddenUntilHover class) AND also continue to tab to the button and link that show up on the hover/focused state.
Right now you can focus on the container and see the hover state; however, when you tab it just goes to the next element and does not allow you to tab to the button or link WITHIN the hover state.
Pseudo code example:
/* My component .jsx */
<div tabIndex="0" className="MainContainer">
<div className="SomeOtherClass">
<div className="HiddenUntilHover">
/* I would like to be able to tab to these clickable things! */
<button>Click me!</button>
I am also clickable
</div>
</div>
</div>
And my SCSS:
.HiddenUntilHover {
display: none;
}
MainContainer:focus,
MainContainer:hover,
> .HiddenUntilHover {
display: block
}
I ran into this issue a few days ago and I solved it using css classes to make the hovered content accessible via keyboard navigation.
The way I got this working was to use css pseudo-classes to ensure that when the div element is active & focused that the buttons inside also display. Specifically the additional use of :focus-within & :focus-visible should ensure that when you tab over the list items, their contents are also displayed and keyboard accessible.
.MainContainer {
&:not(:hover, :focus, :active, :focus-visible, :focus-within) {
.HiddenUntilHover {
visibility: hidden;
}
}
}
<body>
<div tabIndex="0" className="MainContainer">
Content
<div className="SomeOtherClass">
<div className="HiddenUntilHover">
<button>Click me!</button>
I am also clickable
</div>
</div>
</div>
</body>
Here's a link to the Codesandbox demo of this working
When the box is in focus, tabbing further to the button will make the box blur, which will hide it, and its contents, so focus will move to the next accessible element. I think this is the behavior you are experiencing.
You might consider using inserting an aria-activedescendant or tabindex attribute when the box comes into focus. This requires a little javascript.
Strictly speaking, you don't need to rely on the hover state to make that control accessible. You could have an offscreen (or clipped) button/link that is not a DOM child of the hidden (display:none) box. If you take this approach, read up on the aria-owns attribute.
As long as it is marked up as a button or link (or has a tabindex="0" setting), and is not 'really' hidden, it ought to be possible to tab to it.
Try increasing the properties of the class MainContainer
for example.
.MainContainer {
width: 100%;
height: 100px;
}
.MainContainer .HiddenUntilHover {
display: none;
}
.MainContainer:hover .HiddenUntilHover, .MainContainer:focus .HiddenUntilHover {
display: block;
}
Elements appearing on hover are inherently inaccessible. You are experiencing one side of the problem with your code, where it is difficult to make it keyboard accessible.
But think about touch screens that have no real concept of hover: is there some way to reach your button on a smarphone or tablet?
For a more pragmatic answer, if you need to stay with hover, a less hacky solution than the two already posted ones could be the following:
use focusin and focusout events. See for example this question for explanations and differences with focus/blur, and this w3school doc for browser compatibility.
You will have to structure your HTML differently, such as:
<div id="outer">
<div id="hover">
...
</div><!--hover-->
<button>Your button which only appears on hover</utton>
</div><!--outer-->
As well as use a bit of js:
$('#outer').on('focusin', __=>$('#hover').classNames.add('keep-visible'));
$('#outer').on('focusout', __=>$('#hover').classNames.remove('keep-visible'));
With a corresponding .keep-visible class which will leave the element display:block (I'm not a CSS expert, I let you write the code).
The overal functionning is the following: when some element within #outer takes the focus, the focusin element is fired due to bubbling. In the event, you put your class .keep-visible which makes the element to stay visible.
The focusout event is fired when the focus leaves the last element within #outer. At that point you remove the .keep-visible class, which makes the element to disappear.
According to the link above, onfocusin/out aren't standard, but are supported by all major browsers including IE. Firefox is the last one to implement it in 52.0, so it's a kind of defacto standard; we can reasonably expect that it won't disappear soon.
I cannot get this work, looks like not possible, that's why i'm asking...
This is the CSS used:
label.btn {
cursor:pointer;
display:inline-block;
}
label.btn>input[type=checkbox] {
display:none;
}
label.btn>input[type=checkbox]:checked~b {
background:red;
}
/* not relevant, just for testing purpose */
#divtest {
margin-top:1500px
}
Following HTML code will check the input, and then style for <b> tag is applied:
<a href="#divtest" id="anchor">
<label class="btn">
<input type="checkbox"/><b>Click should scroll to '#divetest' element and check input for styling!</b>
</label>
</a>
DEMO styling
If i add attribute 'for' to the label to target the anchor tag, the default browser scrolling works, but then no more styling applied:
<label class="btn" for="anchor">
DEMO anchor
Now, the obvious question:
Can i get these both behaviours working together in pure CSS?
An input element inside an a violates common sense as well as HTML5 CR. Nesting two interactive elements raises the issue which element is activated on mouse click.
Instead of such construct, use valid and sensible HTML markup. Then please formulate the styling question in terms of desired or expected rendering vs. actual rendering, instead of saying that “this” “does not work”.
This won't work since the Input:checkbox is INSIDE the <label>. Browsers will set focus on the input upon a click on the label.
I have a form element generated by Zend Form as follows:
<dd id="website-element">
<input type="text" class="pre-http" value="bigshop.com.au" id="website" name="website">
</dd>
Is there any way I can precede the input element with the text 'http://', using CSS? (I want the user to enter the web site without the leading 'http://').
Thanks...
Try this:-
Use :before pseudo element
Demo
#website-element:before
{
content:"http://";
}
:before creates a pseudo-element that is the first child of the element matched. Often used to add cosmetic content to an element, by using the content property. This element is inline by default.
So it needs to be on the parent of the textbox.
Depends: are you wanting the input value to be prefixed with http:// on submission? If so, you'll have to use Javascript for this one.
Otherwise, you could probably use something like this:
.pre-http:before {
content:"http://";
/* any other styles you'd like to apply to the text */
}
I would like to use css3 features to hiding previous element.
Basically,
I want to use a checkbox to hide previous sibling element without using javascript.
I have prepared a sample for entry point.
http://cssdesk.com/5zccy
Thanks
Edit:
I have changed sample.
My usecase: I want to have collapsible sections at my site. Two area separated by a simple checkbox and checking it will beautifully hide previous sibling.
I believe that using pure css will let me to reduce using javascript for this task.
You can not hide the previous elements - just the following ones with the general sibling selector
DEMO
Then you might be able to position the elements, so on the actual page the checkbox will appear after the .parent div.
There's no css selector to select the previous tag of a matched element. The closest you can get using only css it's doing that for the next element:
<input class="hider" type="checkbox" /> child
<div class="parent">
Parent
</div>
.hider:checked + * {
display:none;
}
I have this code that should show and hide element outputs according to specific checkboxes.
The output that I´ve got is that each checkbox, when clicked, shows more outputs than it should.
How can they be targeted using specific css IDs?
I mean, whan you click on each box, it should only appear the text that´s referencin that specific box, and not all of them.
Thanks for your insight!!
Rosamunda
DEMO
/*styled relative to the label*/
label {display:block;}
label ~ div {display:none; margin-left:1em;}
/*targetting*/
/*boxes with id having this number will style a sibling div with this number*/
input[type="checkbox"][id*="131"]:checked ~ div[class*="131"] {display:inline;}
input[type="checkbox"][id*="134"]:checked ~ div[class*="134"] {display:inline;}
input[type="checkbox"][id*="130"]:checked ~ div[class*="130"] {display:inline;}
You can use the contains *= selector. I'm not sure what browser compatibility it has, but it works for me in Chrome. For instance changing the CSS for the first of the three checkboxes looks like this:
input[id*="131"]:checked ~ div[class="tipo-uf-131"] {display:inline;}
This is close to a perfect example of overthinking things and relying too heavily on CSS. Stylesheets are supposed to be in charge of presentation not functionality. CSS selectors can be complex enough that you could use it for validation checks - does not make it a good idea though :)
You're much better off relying on javascript to accomplish this and would end up with a significantly wider browser support matrix. Change your markup a bit:
<label>Box 1:</label> <input class="form-checkbox" id="cb131" type="checkbox"/>
...<input class="form-checkbox" id="cb134" type="checkbox"/>
...<input class="form-checkbox" id="cb130" type="checkbox"/>
<div id="cb131-linked"><b>Box 1 is checked.</b></div>
<div id="cb134-linked">...</div>
<div id="cb130-linked">...</div>
...and you can add a jQuery listener so that when the state of a checkbox is toggled, you can show the related divs like so:
$checkboxes = $(".form-checkbox");
$checkboxes.change(function(){
console.log("changed");
$checkboxes.each(function(){
$this = $(this)
$("#"+$this.attr("id")+"-linked").toggle($this.is(":checked"));
});
});
Fiddle: http://jsfiddle.net/9t59j/11/
Also, inputs are supposed to be self-closing elements.