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
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".
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 {
}
i am trying to accomplish the following behavior with a QML TextArea:
I want single Words in the Text to be colored differently
I want the "select"-functions to be working for automated scrolling (user interaction is disabled)
There is a stream of text in the TextArea where one Word needs to be selected(highlighted). The user is requested to input some text elsewhere and press enter to proceed (not part of the question). After that the selection jumps to the next word and the last selected word is either colored green or red. There is only a small portion of the text visible (a few lines, managed by the TextArea height – not part of the question) and i need the text to scroll if the next word is out of that visible range .. therefore the selection is quite helpful because all interaction from the user – to scroll or select or whatever – is disabled (disabling is not part of the question)
my main problem is: if i use textFormat: TextEdit.RichText i can easily color the text how i like it to be (<font color=\"green\">{}</font>) but i cannot use the "select"-functions anymore because – as i would guess – the selection works on the "plaintext" and cannot correspond to the "richtext"-selection? Anyway selectWord() etc. does not work QTextCursor::setPosition: Position '-1' out of range is the result. But if i disable the RichText i don't know how to color the text. Maybe i could live without the selection if i could detect the current word – which would be colored blue etc. – and scroll if its out of the visible area to "fake" the selection behavior, but that's just a third option.
I would really either know how to color non-Rich Text or how to select Rich Text in a TextArea.
You can use QSyntaxHighlighter to highlight the words independent of the selection. See QQuickTextDocument and How to implement rich text logic on QML TextEdit with QSyntaxHighlighter class in Qt for more details.
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.
When you select text in a Text or Label or TextArea (or other) control in a Flex application, the selection is shown in white text on a black background. Always.
I have a request to change that — and it seems to be a simple enough thing to want — but I can't find a style (or property) anywhere that permits that. Any ideas out there about how to do this, or reasons why it definitively can't be done?
Change TextField selection color in AS3
http://ericlin2.tripod.com/select/selectt.html