I noticed that if you wrap a radio button or checkbox in a label, the whole thing becomes clickable, even without a for/id pair (in fact, it seems to ignore this because I screwed it up!)
Example:
<label><input type="checkbox"> some text</label>
Then "some text" becomes clickable to check the box. I tested it in FF, Chrome and Opera, and IE8, does anyone know if it works in older browsers, like IE6?
Yes, that's the intended behaviour.
http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.9
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.
It looks like this doesn't actually work in IE6 (haven't tried other versions). If you already have something like jQuery loading on your page, then you could come up with a workable solution fairly easily:
if ($.browser.msie) {
$('label:has(:input):not([for])').each(function() {
var $t = $(this)
, $in = $t.find(':input')
;
if (!$in.attr('id')) {
// use this, or make a proper GUID...
$in.attr('id', 'input_' + (Math.random() * 1000000));
}
$t.attr('for', $in.attr('id'));
});
}
Wrapping label elements are broken in Internet Explorer up until version 7. Link (Google Cache to bypass the registration annoyance).
Related
I've got an ng-options multiselect list that I'm trying to append some icons before the option text with a ::before class. This works great in chrome but not Firefox. The content on the ::before seems to wipe out the option text.
.optionClass:before{
content:"::before "
}
<select multiple="multiple">
<option class="optionClass">first</option>
<option class="optionClass" label="sec" >second</option>
</select>
I'm expecting to see both "first" and "second", but in FF I can only see first. The text for "second" is hidden.
Once again, this works perfectly in Chrome, but not in Firefox.
Is there a way around this issue with just css? If not, is there a way I can leave the label elements off the options when using ng-options with AngularJs 1.x?
I found a tenuous workaround for this issue.
I created a FF bug report for this issue. One of the dev's said "This is kind of expected" but then he referenced using attr(label) appended to the content. This doesnt work for a number of reasons in the :before content (in my case because I'm display FA icons in that field) so I appended it to the :after
https://bugzilla.mozilla.org/show_bug.cgi?id=1644611
The workaround is to create a css Firefox selector and then append the label to the
:after content field using attr(label) Hopefully this doesnt result in any false positives that would display the label twice. In the limited cases I've tested so far it seems to be holding up.
#-moz-document url-prefix(){
.optionClass:after{
content: attr(label);
}
}
I have several input elements for dates and texts.
If their width is bigger than 94px the "X" ::-ms-clear is displayed but some of my inputs are smaller.
Is there a way to tell IE to display the "X" even if the input elements are only 50-60px wide? The solution should work for IE9 and higher.
Your best option here is to disable the custom clear button, and provide your own. You can disable the clear button in Internet Explorer and Microsoft Edge like this:
::-ms-clear { display: none }
This will not, however, disable the custom clear button in other browsers, such as Google Chrome. In Chrome, you'll need to target a different pseudo-element:
::-webkit-search-cancel-button {
-webkit-appearance: none;
}
The above pattern is understood by both Chrome and Microsoft Edge. For Internet Explorer, you will need to continue using the earlier ::-ms-clear element as well.
With these elements hidden, we can now provide our own:
<form>
<input type="search">
<button class="clear">✕</button>
</form>
We can then use Event Delegation to intercept click events on .clear at the parent <form>:
var form = document.querySelector( "form" );
form.addEventListener( "click", function ( event ) {
event.preventDefault();
if ( event.target.className === "clear" ) {
event.target.previousElementSibling.value = "";
}
});
You can see the end-result online at https://jsfiddle.net/jonathansampson/ety8bx93/.
In all major browsers except IE9, it colors a disabled option's text to red this code:
<option disabled='disabled' class='red' value=''>No Students available to take up Assessment</option>
...
//CSS
.red{
color:red;
}
But in IE, it does not changed text color, it keeps it a grey disabled color. How can I get the disabled color to change in IE9?
perhaps use the attribute selector in CSS?
option:disabled,
option[disabled] {
color: red;
}
Something like this?
select :disabled.red {
color: red;
}
Here's a document about the :disabled pseudo-class from Microsoft.
Here's a fiddle that should work in IE9 and up.
Update: This seems to work only in IE>8. This answer points out the workaround of using the readonly attribute on form elements. That's not an option for the option tag though.
There are JavaScript workaround for old IEs around. A simple Google search led me to this site which provides a jQuery solution.
From the blog:
By adding a little css styling magic and you end up with an identical
outcome in all other modern browsers.
You can then enable and disable using javascript. Many people have
written code which makes an option look like it’s disabled, waits for
a click on the option element and then bluring it or focusing the next
/ previously selected option to make it act like it’s disabled.
I have come up with functions used with jQuery to disable / enable a
select option by converting it to an optgroup and back. It is tested
in firefox 2 & 3, safari 3, ie 6 + 7, and it works in Opera 9
(although the opgroups jump to the bottom)
For some reason my checkboxes and dropdown arrows are not visible in chrome, however, they still work.
They are perfectly visible in IE. When I load the page in IE, then try loading the page in chrome, they usually appear until I refresh the page again in chrome.
Anyone know what the problem might be?
Reference image: http://i.imgur.com/Q66w6.png
A 'solution' to this Chrome problem is to
open Task Manager
refresh the page in Chrome while the Taks Manager is open in front of the browser.
I couldn't believe this would actually work when I read about it, but I've seen it with my very eyes. This issue apparently exists since the early versions of Chrome and still exists in current versions, though it only occasionally occurs. It seems to be permanently gone after this 'fix'.
In webkit browsers the following code will remove dropdown arrows.
select{
-webkit-appearance:none;
}
Checking in your browsers inspector will indicate if it's being applied in your case or not.
Found this question while having the same problem.
Setting:
input {
width:100%
}
was the cause of the problem for me. This:
input[text] {
width:100%
}
was what I wanted (leave checkbox widths unchanged) -- setting the width of checkboxes in chrome seems to make them disappear.
As user48956 mentioned; setting input width to 100% causes checkboxes to vanish in chrome.
I use bootstrap and often have forms where I want all inputs to stretch 100% and don't want to use bootstraps form methods and this issue still comes up.
If you have defined input {width:100%} you can put a width on the div containing the checkbox and it will fix. e.g.
<div style="display:inline-block; width:20px"><input type="checkbox" name="read_privacy_policy" id="read_privacy_policy" class="pull-left"></div>
<div style="display:inline-block">I have read and understand the Privacy Policy.*</div>
or you can set style="width:auto" on the input itself
I had the same issue
Try this css style supression all style that acts in the input checkbox element.
-webkit-appearance: checkbox!important;
I think it's a bug and it's still there. I use checkboxes in a ligthbox window and they don't show. I'm on OS-X using Chrome 21.
I can't find how to convert TextBox multiline to Uppercase in Opera?
I use "text-transform:uppercase" but it work only with IE
It looks like you found a bug in Opera because it works in IE 8 and Firefox 3.6.
A possible solution is this javascript:
<script type="text/javascript">
function setUpperCase(textarea) {
textarea.value = textarea.value.toUpperCase();
}
</script>
...
<textarea onkeyup="setUpperCase(this)"></textarea>
Hm. I think Opera disabled text-transform:upper-case on INPUT and TEXTAREA by default because a certain important insurance site by mistake styled their inputs as upper-case and people found it very frustrating and confusing to be typing in upper case only. :) (For that specific styling and at that time, Opera was the only browser obeying the text-transform instruction. Things may have changed.).
For usability, I would recommend that you transform to upper case on the server side or when the user is done typing (for example in the onchange event).
(Further, I'd expect CSS to only affect the way things are shown on screen. So even if you style a TEXTAREA with text-transform:upper-case and the text is shown in upper case when the user is typing, I'd expect the browser to send the text to the server in lower case if that's what the user typed.)