Firefox doesn't display tooltips on disabled fields.
The following displays tooltip in IE/Chrome/Safari except Firefox:
<input type="text" disabled="disabled" title="tooltip text."/>
Why doesn't Firefox display tooltip on disabled fields? Is there a work around this?
Seems to be a (very old, and very abandoned) bug. See Mozilla Bugs #274626 #436770
I guess this could also be explained as intended behaviour.
One horrible Workaround that comes to mind is to overlap the button with an invisible div with a title attribute using z-index; another to somehow re-activate the button 'onmouseover' but to cleverly intercept and trash any click event on that button.
I guess you are using some frameworks like bootstrap. If so, it add pointer-events: none to the 'disabled' element, so all the mouse events are ignored.
.btn[disabled] {
pointer-events: auto !important;
}
can fix the problem.
You can work around this with jQuery code like:
if ($.browser.mozilla) {
$(function() {
$('input[disabled][title]')
.removeAttr('disabled')
.addClass('disabled')
.click(function() {return false})
})
}
The z-indexing thing could be done like this:
.btnTip
{
position: absolute;
left: 0%;
right: 0%;
z-index: 100;
width: 50px;
/*background-color: red;*/
height: 17px;
}
(…)
<div style="background-color: gray; width: 400px;">
Set width of the tip-span to the same as the button width.
<div style="text-align: center;">
<span style="position:relative;">
<span class="btnTip" title="MyToolTip"> </span>
<input type="button" name="" disabled="disabled" value="Save" style="width: 50px;height:17px;" />
</span>
</div>
Left and right helps positioning the host on top of the disabled element.
The z-index defines what kind of layer you put an element in.
The higher number of a z-layer the more ‘on top’ it will be.
The z-index of the host and/or the disabled element should be set dynamically.
When the disabled element is disabled you want the tooltip host on top and vice versa - at least if you want to be able to click your element (button) when it is NOT disabled.
I have faced the similar issue and i could fix it using juery and small css class, you would require to create two new span elements and a css class which are as follows
Just add these in a general js and css file which is used in all over the application or web site
.DisabledButtonToolTipSpan
{
position :absolute;
z-index :1010101010;
display :block;
width :100%;
height :100%;
top :0;
}
To display tooltip for disabled button in firefox browser.
$(window).load(function() {
if ($.browser.mozilla) {
$("input").each(function() {
if ((this.type == "button" || this.type == "submit") && this.disabled) {
var wrapperSpan = $("<span>");
wrapperSpan.css({ position: "relative" });
$(this).wrap(wrapperSpan);
var span = $("<span>");
span.attr({
"title": this.title,
"class": "DisabledButtonToolTipSpan"
});
$(this).parent().append(span);
}
});
}
});
Hope this helps,
Preetham.
You could use javascript. Use the mouseover event.
(A lot of libraries like JQuery and Mootools have tooltip plugins available. Using these you can even style the tooltips).
Related
I'm trying to build a button that looks like Zoom's button.
Here there is a button to pick a device inside the camera button. I'd like to create something similar, where you have a button and another button that expands a picker inside it.
How can you create this in an accessible way?
If I nest buttons in React, it throws errors that you can't nest a button inside another. Zoom's equivalent would be:
<button>
Stop Video
<button>Pick Device</button>
</button>
which doesn't work. How would you create an interface like this so it stays accessible (and valid)?
Preword
Don't nest interactive elements
There is a reason that it isn't valid HTML to nest buttons or hyperlinks, it causes nightmares for knowing which action should be performed on a click (for a start) and for assistive technology this makes things even worse as it can confuse the accessibility tree as to what it should present to screen readers.
The answer
If you look carefully you will see they aren't actually nested, the "picker" button is placed on top of the other button.
Now there is an issue here in terms of accessibility, click / tap target size.
A button / interactive element should be no less than 44px by 44px
So the Zoom example you gave fails this criteria. Additionally the tooltip that says "stop video" looks wrong if you have the picker selected as that should be the tooltip for the button that is currently hovered.
So how could we create an accessible version of what you want?
I would recommend having a large button with a 44 by 44 button placed on top to the right.
This can easily be done with absolute positioning.
To ensure that it is evident visually that the buttons are related I inset the second button by 2px.
The below is not a complete example but I have given you a start.
I added aria-expanded to the button that opens the sub menu, this gets toggled when the menu is opened.
I also added the aria-haspopup attribute to let users know that this button opens a sub menu.
I also added aria-controls to let assistive technology know the relationship between the button and the menu it opens.
Finally you will see I added a <span> with some visually hidden text inside so that screen reader users know that the picker button opens the video controls.
The example maintains logical tab order and is pretty accessible, but there are still things such as being able navigate the menu buttons with the arrow keys, closing the menu with Esc key and returning focus to the button that opened the menu etc. that you need to implement yourself. Oh and styling obviously!
var mainButton = document.querySelector('.main-button');
var menuToggle = document.querySelector('.sub-button');
var menu = document.getElementById('controls');
mainButton.addEventListener('click', function(){
alert("clicked the main button");
});
menuToggle.addEventListener('click', function(){
if(menu.classList.contains('open')){
menu.classList.remove('open');
menuToggle.setAttribute('aria-expanded', false);
}else{
menu.classList.add('open');
menuToggle.setAttribute('aria-expanded', true);
}
});
.container{
position: relative;
width: 144px;
height: 48px;
}
.main-button{
width: 144px;
height: 48px;
padding-right: 50px;
}
.sub-button{
position: absolute;
width: 44px;
height: 44px;
top:2px;
right:2px;
}
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
#controls{
display: none;
}
#controls.open{
display: block;
}
<div class="container">
<button class="main-button">Stop Video</button>
<button class="sub-button" aria-expanded="false" aria-haspopup="true" aria-controls="controls">⌄ <span class="visually-hidden">Pick Device</span></button>
<ul id="controls"
role="menu"
aria-labelledby="sub-button">
<li><button>Option 1</button></li>
<li><button>Option 2</button></li>
</ul>
</div>
The react gives a warning if you try to do so and the reason is simple. It has everything to do with semantic HTML and you should never put a button inside a button.
Alternatively to get the desired behaviour you can do something like this:
<div style={{ position: "relative", width: "200px", height: "40px" }}>
<button
onClick={() => console.log("Stop Video")}
style={{ width: "100%", height: "100%" }}
>
Stop Video
</button>
<button
onClick={() => console.log("Pick Device")}
style={{ position: "absolute", right: 0, top: 0 }}
>
Pick Device
</button>
</div>
This will do the same thing you need. Here is the codesandbox example for the same implementing the exact same thing.
I got a button which is inside a div, but I need to get that div on top of this button, in order to be able to use onMouseOut event.
I tried to change z-indexes of those two, though that didn't helped. Any ideas? I can include code for better understanding but I think it's not necessary.
Impossible. Children will always appear above their parent.
You need to seek another approach; disabled elements do not appear to have events. I'd reconsider the UI to circumvent this issue. If you absolutely must have this functionality, perhaps replace the disabled button with another HTML element that can accept mouse over events.
http://jsfiddle.net/4HU72/
HTML
<button>Active Button</button>
<div>Disabled Button</div>
Disable button
<span></span>
CSS
button, div {
width: 200px;
height: 200px;
display: block;
background-color: #336699;
}
div {
display: none;
}
Javascript
$("a").click(function() {
$("button").hide();
$("div").show();
});
$("button, div").mousemove(function(e) {
$("span").html(e.pageX+"|"+e.pageY);
});
Is it possible with CSS/HTML to resize some box to match exactly it's background image size? Without using javascript.
For instance let's say I have a simplest div:
<div class="image">TEST</div>
.image {
background-image: url(http://placehold.it/350x150);
width: 350px;
height: 150px;
}
And I would like to resize it to those 350x150 dimensions without hardcoding those values. Also I cannot put any content inside this div.
http://jsfiddle.net/5Dane/
EDIT: I see a lot of answers I already was aware of, thank you for them, but that's not the solution here unfortunately. Below I'm explaining why I need such functionality.
What I'm trying to do is a form with steps (buttons previous and next). In session I hold all the values the user has input but there are some buttons which will add more functionality for the user (like multiple dynamically added rows for data). I'm doing it with jQuery of course, but I want the form to be able to work when there is no java script enabled.
Now to the point - I was trying to find out how to tell the difference which button the user has clicked. The case is all my submit buttons need to be images and the simplest solution <input type="image"/> doesn't send info about the button clicked with POST data. That's why I came to this solution:
<input class="submit_img" type="submit" style="background-image:url(http://placehold.it/108x23); width:108px; height: 23px;" value=" " name="some" />
/* Submit button with image */
input.submit_img {
font-size: 1em;
border-radius: 0px;
box-shadow: rgba(0, 0, 0, 0.15) 0 1px 1px;
border: solid 0px #000000;
cursor: pointer;
}
http://jsfiddle.net/XRvqV/
This way my form will submit all the data AND I will know which button the user clicked. Also the button looks fine, like it should look. I was wondering though if it was possible to make it a little more portable - my buttons all have different widths for different functions. Can someone suggest another approach here?
No, you can't. CSS is not aware of the the image size. You can do it easily with JQuery.
JQuery exmaple
$(function(){
var bg = $("div.image").css('background-image');
bg = bg.replace('url(','').replace(')','');
var newImg = new Image();
newImg.src = bg;
$("div.image").css("width",newImg.width);
$("div.image").css("height",newImg.height);
});
This is a hack and doesn't use background-image (uses an img tag instead), but is the only way I can think of without using JS.
HTML
<div class="container">
<div class="image">
<img src="http://www.pandafix.com/pandafix/images/untitled_1.jpg"/>
</div>
<div class="content">
some text
<br/>
some more text
<br/><br/><br/><br/>
text text text
</div>
</div>
CSS
.container {
position: relative;
}
.content {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
color: red;
}
Basically, you allow an img tag to determine the height and width of a container. Then, overlay whatever content you want on top of the image (I'm assuming you want to put something on top).
jsFiddle
i would suggest you a alternative way to solve your problem. if you use bootstrap you can involve a div to make resizable image.
<div class="img-responsive">
<img src="test.jpg" width='xxx' height='yyy' alt='test'>
</div>
You can't do that using just HTML. But you can do this using HTML!
You should try this:
background-size: values;
This way, you will resize the background-image to the size of the container!
You can't do it directly.
The only solution it would be fetching the BG of the DIV element and attach new DOM img element to the DOM node, afterwards you could use the info of the image to add the proper with and height..
if you are willing to use jquery you can do this.
$(function(){
$('.image').each(function(index,element){
var _t = $(this);
_t.data("LinkedImg","LinkedImage"+index);
$('body').append(
$('<img />',{
id:"LinkedImage"+index,
src:_t.css('background-image')
}).hide());
});
$('document').on('load',function(){
$('.image').each(function(index,element){
var _t = $(this);
var _tmp_img = $('#'+ _t.data("LinkedImg"));
_t.css({
width:_tmp_img.width(),
height: _tmp_img.height()
});
});
});
})
In IE11, the following piece of code will check the radio button as expected:
<input type="radio" id="myRadio" />
<label for="myRadio">
<img src="..." />
</label>
Wrapping a <form> around the above will however break the functionality of the label.
This SO post offers a solution to the problem by styling the image with pointer-events:none, and the label as a block-level element.
While that should of course not even be necessary, it also disables the ability to handle mouse events.
It would be much appreciated if someone can offer a pure CSS solution to this problem.
PS:
One thing worth mentioning, is that in IE11, if the image is styled as a block-level element, then pointer-events seems to loose its effects.
My markup looks like this (classes and other superfluous attributes removed):
<li>
<label>
<figure>
<img>
</figure>
<div>
<label></label>
<input type="radio">
</div>
</label>
</li>
It's a bit messy because some of it is auto-generated by Drupal. It didn't work in IE 11, but I made it work by adding:
img {
pointer-events: none;
}
I didn't need to change anything else and I have no other special css-trickery that I can see.
As I answered previously in the referred question, there is a pure CSS way.
If your image is display: block that fix can still be used, even tho you have to add some more trickery. For example:
CSS:
label img{
display: block; /* requirement */
/* fix */
pointer-events: none;
position: relative;
}
/* fix */
label{
display: inline-block;
position: relative;
}
label::before{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
HTML:
<form>
<label>
<input type="checkbox"> some text
<img src="http://placekitten.com/200/200" alt="kitten!">
</label>
</form>
Fiddle
If the problem is with click handlers on the image it self, you may be able to solve that with a wrapper element on the image instead (which maybe the label, so no extra element may be needed). (But for that I'd like to see a more specific example that you are trying to do.)
img {
pointer-events: none;
position: relative;
z-index: -1;
}
This solved it in my case.
The img will be placed behind the label but "shine through".
I hope it helps.
You can put the image in the background of the label..
<label for="myField1" ><img src="image1.jpg"></label>
becomes
<style>
#lblMyField1 {
background-image: url('image1.jpg');
background-position: center center;/* depend..*/
background-repeat: no-repeat;
}
</style>
<label id="lblMyField1" for="myField1" > </div>
This is a rather interesting find. I'll do a bit more research to determine whether or not I can identify a more root cause, but for the time being I have a couple suggestions.
Nest Your Input
<label>
<input />
<img />
</label>
This is a common convention used for associating inputs with labels. Given the input and the label are both inline, this doesn't affect the actual layout necessarily.
JavaScript Patch
Another option is to perform a click on the corresponding input when one didn't happen naturally. In this approach we setup a timeout to click after 100ms. Any click that happens otherwise will clear our timeout:
$("label[for]").each(function () {
var timeout;
var element = $("#" + $(this).attr("for"));
$(this).on("click", function () {
timeout = setTimeout(function () {
element.click();
}, 100);
});
element.on("click", function () {
clearTimeout(timeout);
});
});
Browsers that already work will clear the timeout, preventing a second click. Internet Explorer 11 will click via the timeout.
Demo: http://jsfiddle.net/CG9XU/
One caveat is that that solution only works for labels that were on the page when the case was ran. If you have forms coming in late (perhaps via ajax), you'll need to listen higher up on the DOM. The below example listens on the document level:
$(document).on("click", "label[for]", function () {
var timeout;
var element = $("#" + $(this).attr("for"));
timeout = setTimeout(function () {
element.click();
}, 100);
element.one("click", function () {
clearTimeout(timeout);
});
});
The label element accepts as its content type all phrasing elements, and this includes image elements. I'll keep looking into this, and will update this answer with any insight.
Here is a solution that worked for me using pointer-events:none without having to set my image to position:relative as I needed it to be position:absolute for my design.
HTML
`<form>
<input id="radio-button-action" type="radio" name="search" value="open">
<label for="radio-button-action">
<div class="img-wrapper">
<img src="images/image.jpg" alt="image">
</div>
</label>
</form>`
CSS
So in this example we have an image that needs to be position: absolute
img {
position: absolute
top: 10px;
right: 10px;
height: 25px;
width: 25px;
display: inline-block; /* can be block, doesn't matter */
}
Now set pointer-eventson the img-wrapper div
.img-wrapper {
position: relative /* this is required for this to work */
pointer-events: none /* this is what will make your image clickable */
}
It works with
img {
pointer-events: none;
}
Is it possible to disable form fields using CSS? I of course know about the attribute disabled, but is it possible to specify this in a CSS rule? Something like -
<input type="text" name="username" value="admin" >
<style type="text/css">
input[name=username] {
disabled: true; /* Does not work */
}
</style>
The reason I'm asking is that, I have an application where the form fields are autogenerated, and fields are hidden/shown based on some rules (which run in Javascript). Now I want to extend it to support disabling/enabling fields, but the way the rules are written to directly manipulate the style properties of the form fields. So now I have to extend the rule engine to change attributes as well as style of form fields and somehow it seems less than ideal.
It's very curious that you have visible and display properties in CSS but not enable/disable. Is there anything like it in the still-under-works HTML5 standard, or even something non-standard (browser specific)?
You can fake the disabled effect using CSS.
pointer-events:none;
You might also want to change colors etc.
This can be helpful:
<input type="text" name="username" value="admin" >
<style type="text/css">
input[name=username] {
pointer-events: none;
}
</style>
Update:
and if want to disable from tab index you can use it this way:
<input type="text" name="username" value="admin" tabindex="-1" >
<style type="text/css">
input[name=username] {
pointer-events: none;
}
</style>
Since the rules are running in JavaScript, why not disable them using javascript (or in my examples case, jQuery)?
$('#fieldId').attr('disabled', 'disabled'); //Disable
$('#fieldId').removeAttr('disabled'); //Enable
UPDATE
The attr function is no longer the primary approach to this, as was pointed out in the comments below. This is now done with the prop function.
$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable
It's very curious that you have visible and display properties in CSS but not enable/disable.
You're misunderstanding the purpose of CSS. CSS is not meant to change the behavior of form elements. It's meant to change their style only. Hiding a text field doesn't mean the text field is no longer there or that the browser won't send its data when you submit the form. All it does is hide it from the user's eyes.
To actually disable your fields, you must use the disabled attribute in HTML or the disabled DOM property in JavaScript.
You can't use CSS to disable Textbox.
solution would be HTML Attribute.
disabled="disabled"
The practical solution is to use CSS to actually hide the input.
To take this to its natural conclusion, you can write two html inputs for each actual input (one enabled, and one disabled) and then use javascript to control the CSS to show and hide them.
I am always using:
input.disabled {
pointer-events:none;
color:#AAA;
background:#F5F5F5;
}
and then applying the css class to the input field:
<input class="disabled" type="text" value="90" name="myinput" id="myinput">
first time answering something, and seemingly just a bit late...
I agree to do it by javascript, if you're already using it.
For a composite structure, like I usually use, I've made a css pseudo after element to block the elements from user interaction, and allow styling without having to manipulate the entire structure.
For Example:
<div id=test class=stdInput>
<label class=stdInputLabel for=selecterthingy>A label for this input</label>
<label class=selectWrapper>
<select id=selecterthingy>
<option selected disabled>Placeholder</option>
<option value=1>Option 1</option>
<option value=2>Option 2</option>
</select>
</label>
</div>
I can place a disabled class on the wrapping div
.disabled {
position : relative;
color : grey;
}
.disabled:after {
position :absolute;
left : 0;
top : 0;
width : 100%;
height : 100%;
content :' ';
}
This would grey text within the div and make it unusable to the user.
My example JSFiddle
input[name=username] {
disabled: true; /* Does not work */ }
I know this question is quite old but for other users who come across this problem, I suppose the easiest way to disable input is simply by ':disabled'
<input type="text" name="username" value="admin" disabled />
<style type="text/css">
input[name=username]:disabled {
opacity: 0.5 !important; /* Fade effect */
cursor: not-allowed; /* Cursor change to disabled state*/
}
</style>
In reality, if you have some script to disable the input dynamically/automatically with javascript or jquery that would automatically disable based on the condition you add.
In jQuery for Example:
if (condition) {
// Make this input prop disabled state
$('input').prop('disabled', true);
}
else {
// Do something else
}
Hope the answer in CSS helps.
You cannot do that I'm afraid, but you can do the following in jQuery, if you don't want to add the attributes to the fields. Just place this inside your <head></head> tag
$(document).ready(function(){
$(".inputClass").focus(function(){
$(this).blur();
});
});
If you are generating the fields in the DOM (with JS), you should do this instead:
$(document).ready(function(){
$(document).on("focus", ".inputClass", function(){
$(this).blur();
});
});
This can be done for a non-critical purpose by putting an overlay on top of your input element. Here's my example in pure HTML and CSS.
https://jsfiddle.net/1tL40L99/
<div id="container">
<input name="name" type="text" value="Text input here" />
<span id="overlay"></span>
</div>
<style>
#container {
width: 300px;
height: 50px;
position: relative;
}
#container input[type="text"] {
position: relative;
top: 15px;
z-index: 1;
width: 200px;
display: block;
margin: 0 auto;
}
#container #overlay {
width: 300px;
height: 50px;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
background: rgba(255,0,0, .5);
}
</style>
There's no way to use CSS for this purpose.
My advice is to include a javascript code where you assign or change the css class applied to the inputs.
Something like that :
function change_input() {
$('#id_input1')
.toggleClass('class_disabled')
.toggleClass('class_enabled');
$('.class_disabled').attr('disabled', '');
$('.class_enabled').removeAttr('disabled', '');
}
.class_disabled { background-color : #FF0000; }
.class_enabled { background-color : #00FF00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
Input: <input id="id_input1" class="class_enabled" />
<input type="button" value="Toggle" onclick="change_input()";/>
</form>
A variation to the pointer-events: none; solution, which resolves the issue of the input still being accessible via it's labeled control or tabindex, is to wrap the input in a div, which is styled as a disabled text input, and setting input { visibility: hidden; } when the input is "disabled".
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values
div.dependant {
border: 0.1px solid rgb(170, 170, 170);
background-color: rgb(235,235,228);
box-sizing: border-box;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type {
display: inline-block;
}
input[type="checkbox"]:checked ~ div.dependant:first-of-type {
display: contents;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type > input {
visibility: hidden;
}
<form>
<label for="chk1">Enable textbox?</label>
<input id="chk1" type="checkbox" />
<br />
<label for="text1">Input textbox label</label>
<div class="dependant">
<input id="text1" type="text" />
</div>
</form>
The disabled styling applied in the snippet above is taken from the Chrome UI and may not be visually identical to disabled inputs on other browsers. Possibly it can be customised for individual browsers using engine-specific CSS extension -prefixes. Though at a glance, I don't think it could:
Microsoft CSS extensions, Mozilla CSS extensions, WebKit CSS extensions
It would seem far more sensible to introduce an additional value visibility: disabled or display: disabled or perhaps even appearance: disabled, given that visibility: hidden already affects the behavior of the applicable elements any associated control elements.