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.)
Related
I am using a search input in my markup like so:
<input type="search" placeholder="search" />
Webkit styles an input element of type 'search' in a number of ways.
One feature is that when you start entering input - you see a cancel ('x') button on the right hand side of the input element.
However, if you are using a right-to-left language such as Hebrew or Arabic - the webkit cancel button still appears on the right hand side (instead of the lhs).
Here is a fiddle which demonstrates this point.
Is this a webkit bug?
If it is a bug - Is there a workaround where I can still use type="search" in my markup
It’s not a bug in the strict sense, since there is no public specification on the cancel button. It’s a (mis)feature, or incomplete localization. It has been reported e.g. as Bug 51499 at WebKit Bugzilla in 2010, and looks like it won’t be fixed.
Just for completeness, I just found a workaround for this problem on this post
The following code will enable you to style and position the 'x' button according to your needs.
input[type="search"]::-webkit-search-cancel-button {
/* Remove default */
-webkit-appearance: none;
/* Now your own custom styles */
...
...
}
See a LIVE DEMO of this.
Similarly you could remove the webkit cancel button entirely like this:
input[type="search"]::-webkit-search-cancel-button
{
display: none;
}
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)
When I use text-ident property in CSS, what I expect to see is when you focus into the text input area, the text cursor icon/caret will appear indented. But it appears as if it isn't indented until you type for first character. The only work around is to use left padding on the input element, but I want to avoid using padding because I am also setting a width and don't want to have to implement a padding fix for IE using an IE specific spreadsheet.
This bug happens in Safari.
See below for images of what I'm talking about.
On focus when there is no text, the text-ident doesn't affect the caret position:
When you start typing, it indents correctly:
After you type and then delete what you've typed, it displays what I want it to do from the beginning (indent the caret).
HTML:
<input type="text" />
CSS:
input { text-indent: 10px; }
It's a confirmed WebKit bug that has recently been resolved https://bugs.webkit.org/show_bug.cgi?id=82688
Your version of Safari may be too old for this fix to be included.
Use padding-left instead.
<style>
::-webkit-input-placeholder {text-indent:10px!important;}
:-moz-placeholder { text-indent:10px!important;}
::-moz-placeholder {text-indent:10px!important;}
:-ms-input-placeholder {text-indent:10px!important;}
</style>
This allows the text indent to focus indented, which I believe has been fixed in newer versions of webkit / safari. However, this fix should help you out with the older versions.
Thanks
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 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).