In both Firefox and Chrome, the text selection of a text field (= the range of text that's selected in the field) is only indicated when that field has the focus. The selection does exist even when the field doesn't have the focus — it's queryable from JavaScript, and it becomes visible again if the field regains the focus in a way that doesn't change the selection — but, it's not visible to the user. (See example code snippet below. Highlight whatever text you want in the <textarea> field; then use Tab and Shift+Tab to transfer focus away and back. Your text only appears selected while the field has the focus.)
Is there a way to override this behavior?
Some notes:
I tried using CSS's ::selection pseudo-element with rules to set the color and background-color, but that didn't help; the rules were only applied while the field had the focus.
I'd prefer to do it with just HTML/CSS/JavaScript (no user intervention), but I'm open to using browser settings if necessary.
I don't care whether the selection looks the same without focus as with focus, as long as it's visible in both cases.
I mainly need to support Firefox, but if possible I'd like to support other modern browsers as well.
I don't care whether the selection is indicated when it has length zero (= when it's just a cursor position).
<textarea rows="2" cols="15">Hello, world!</textarea>
Do you tried to use the specific selection elements for firefox in CSS? Looks like the element is only implemented in Firefox this way (Version 2-61 after that it is fixed):
::-moz-selection {
}
Related
Is it possible to always show the default 'x' in a search input HTML element in Microsoft Edge only by using CSS (without creating custom component)?
The pseudo-element ::-ms-clear and the opacity property do not have any affect on this 'x' button in Microsoft Edge.
Doesn't look like it's possible without creating your own x button. From MDN - ::-ms-clear:
The clear button is only shown on focused, non-empty text controls. This includes inputs that appear text-like or fall back to type="text".
The image below shows an input field with the text 'test' in it, immediately after clicking in the input to gain focus:
I'm trying to remove the green highlighting (the green is coming from the OS highlight color). Here is another image illustrating the desired behavior with a normal, unstyled input:
As you can see, the standard behavior is a cursor appearing where the user clicked, as opposed to highlighting the entire text with no cursor. What is causing this behavior?
The styling for this element is scattered all over the place, and inspecting the computed properties doesn't seem to reveal anything unusual to me. This behavior is present in Chrome and Firefox.
It appears something is selecting the text on focus. You could use javascript to collapse the selection on focus.
http://developer.mozilla.org/en-US/docs/Web/API/Selection/collapse
IE 10 is giving me undesired UI for input elements that include a required attribute. For type=text, it’s a tooltip and for checkboxes, a red border.
I’ve figured out how to prevent such things in Chrome and Firefox (via pseudo-selectors). Are there selectors for these in IE, or other methods?
What looks like red border seems to be just an outline, which can be modified or removed using outline properties in CSS, e.g. set to one pixel wide using outline-width: 1px or removed using outline: none.
The tooltips might be something that you cannot style. Note that there are two kinds of tooltips for a required field on IE: one that you get on mouseover (a small simple box), and one that you get when trying to submit the form without a value for the required field (a larger box with a little arrow-like part, as in the screenshot).
Chrome has some cute features to make the selected form element (input ect) stand out like adding a border color and, more annoyingly, it slightly reduces the margins on some of my form elements after they've been selected, shifting the page slightly each time a text entry box is selected.
It's not the textarea draggable resize effect that chrome has, it's effecting input elements that should have a constant size, but they automatically change once selected.
Is there any CSS to disable this feature, or do I simply have to make sure my text box margins/padding are set up such that Chrome doesn't resize them?
Here it is
textarea { resize:none; }
I love working on other people's sites...the problem was javascript they were using to restyle form elements after click and I have no idea why. Solution was to remove that junk.
This question is because normally when you want to click a button or link the user expect a HAND in the cursor but in the case of input type="button" you get a cursor arrow , does any know why is this? is cause is inherit from base class input?? and all inputs have pointer cursor?
I Know a simple css lik {cursor:pointer} //make the work... but wait is not make more sense that instead of "cursor:pointer" would be {cursor:hand} //IE support this one.
Hope some have the answer.
It's because it has no defined cursor style so it defaults to default
The "hand" cursor originally arose because of single-click links. And, in a web browser, the <a> element is the link element.
But, in other contexts (Windows forms, etc.), the default cursor (arrow pointer) can click on the buttons, so the browsers are just keeping UI consistent.
A browser could theoretically change the default cursor to a hand for <input type="button"> elements.
But, cursor:pointer; makes more sense for CSS, because it doesn't necessarily have to be a hand image. You can always change your cursors to another image, but the behavior (pointer in this case) defines what you call the cursor, not the image.