After spending some time on Google I came here to get solution.
What I have to do is to stop the text highlight of an input field(HTML form fields) when user select using cursor. If user tries to select whole or part of text in an input field cursor should stop at the index where user starts the mouse left click. Something like this
This should not
This should
User should be able to locate the cursor in any index user wants but user should not be able to highlight text. I am not pro-expert in CSS. Any solution for this? JS solution would be the usage of setSelectionRange or createTextRange.
Any best CSS or JS solution please.
I hope its not possible to stop the highlight, well instead you can apply a trick to change the background color of the highlight to the textfield background color.
When the background colors would be same then it would not be highlighted, here ios the code to achieve the same :-
View Demo at jsfiddle.
CSS
input::selection {
background: #fff;
}
input::-moz-selection {
background: #fff; /* Firefox lower versions */
}
Related
I am not sure how I can change the cursor with a class attached to it in JavaScript. Currently, the code looks something similar to this...
/*HTML PART*/
<input onclick="Cursor1()" class="Box1" type="text" id="NumInput">
//JS
function Cursor1(){
document.Box1.style.Cursor = 'text';
}
I was expecting this code to function and change the cursor when the textbox is clicked. But instead, it just keeps the normal one that was set as the normal in the CSS body tag.
I'd appreciate it if I could also get some help on switching the cursor back to what it was before the box was clicked when the user moves the cursor out of the textbox area.
You mean something like:
input:hover {
cursor: cell;
}
when you hover over or click in input area, new cursor will appear, when hover out it will switch to default.
you can use custom cursors also with any image or icon you want to.
https://www.digitalocean.com/community/tutorials/css-cursor-property
How to hide input field blinking cursor in IE.
This is not duplicate since there are many similar question on but so far i have seen does not works in IE.
When I simply use this css it works fine chrome and Firefox but in IE it only hides character not blinking cursor.
.hideChar{
color: white !important;
}
At the same time I don't want to do blur or change cursor position because in input field value is continuously coming I just want to hide that character and cursor not alter value or cursor position.
I got the same problem and here is your solution
Write pointer-events: none; CSS property for that input field.
Here is the solution http://jsfiddle.net/hqBsW/488/
In this example, this readonly input field will not show blink cursor in the IE browser.
http://i.stack.imgur.com/dxguj.png
What is that blue rectangle line? I want it to be on my control whenever I want to use it. So if I want to remove it, I should be able to for the element. I use bootstrap 3.
Just add the below CSS anywhere in the stylesheet or internally:
button:focus {
outline:0;
}
The blue rectangle line you're pointing out is a line drawn around elements to let them stand out, a so called outline. Imagine a user with only a keyboard navigating through a website, the outline is a good reference to show the user which element is active/has focus. When the outline is on a menu item for example, it shows the user that hitting enter will propably bring him to that particular page.
There is an outline style by default in most browsers, Bootstrap styled it their own way.
More on the outline styling property:
http://www.w3schools.com/cssref/pr_outline.asp
To get rid of the outline for buttons in Bootstrap you could use:
.btn:focus {
outline:none;
}
https://jsfiddle.net/DTcHh/12056/
-edit
As Guruprasad Rao pointed out, the valid outline property is none, according to W3C schools.
In my project, there is a autocomplete search textbox. Whenever the user is typing something the suggestion box will appear just below the textbox. This suggestion box is hiding behind the screen.
I tried to get in front by applying largest possible z-index, still no use.
Here is the link to the site.
I am providing my site link because the jsfiddle is working fine.
For testing purpose, type co in the textbox and see how the suggestion box is visible.
search for this code and change 12 to 9 .. solve the problems
.edgefxContentContainer {
top: -16px;
z-index: 9;
}
change this div class style :
<div class="edgefxContentContainer pRelative">
Your .edgefxContentContainer contains a z-index of 12. This reveals some of the suggestion box parts. Suggest you search for z-index and debug it
I am trying to change the color of a block of text on mouseover, but only got as far as the text changing if you scroll over the top border of the text.
http://angelamiller.net/archives/test/v3/
I am testing the first block of text on the top left corner, "Thesewordshelptoshapeme".
using
.typoBox div.l3_1 ul:hover {
color:red;
}
What I want to do eventually, is when a user rolls over a block of text and clicks the text, I can then target the other blocks of text (they are all in separate divs) with jQuery or similar to hide those divs and reveal a hidden div which would contain descriptive text about that block of text.
I am not worried about this working on ie 6, but currently am on my mac and have only tried firefox and chrome at this point.
I would be willing to add anchors if it would help.
In my google search the closest thing I could find was a jQuery solution but didn't work:
<script>
$("div.l3_1 ul").mouseover(function () {
$(this).css("color","red");
});
</script>
The problem is your z-indexing. When I click on something with firebug, it gives me the top div.tw. This is true, because you manually put the z-index of that on top. So by means of hitTesting, this is correct. Problem is, I think it is impossible to have some not be hittested. So it has nothing to do with your css. Remove the tw div, or its indexing and you should be fine.
There is some problems with the selectors, not the rules. If you add display: none to the div.13_1 ul { rule, you'll see that it has no effect. That's as far as I've gotten.