On click the div below gets a blinking cursor, how can I prevents that? It is supposed to be a link not a div for text-entries. Do I need javascript?
Using Firefox:
js fiddel
HTML
<div class="menupoint"></div>
Press F7 in Firefox to turn off caret browsing mode. This has nothing to do with your html or CSS.
you can use CSS to change to cursor on your div
kindly check this : CSS cursor Property
Related
I am working on a form for a company that still uses tables and they want me to add CSS to their template without changing any HTML/JS. There is a nested input(CheckBox) that should be selected when a user clicks the image. This is working fine in Chrome, Firefox, and Edge but in IE when the image is clicked it will not check the box. Below is a screen cap of the DOM and an actual choice in the browser.
I changed the background color of the font tag to distinguish it from the image and added a border around the td. I noticed 2 strange things.
When the font tag is clicked it will check the box.
When the box is checked, I am able to click the image and have the checkbox
de-selected. Once it is, I can not re-select it by clicking the image.
Any idea of what is causing this and what can be done? I am using IE 11.
It appears that IE has a bug which causes this problem. I found some helpful information from this site:
https://snook.ca/archives/javascript/using_images_as
The CSS fix was:
label img{
pointer-events: none;
}
label{
display: inline-block;
}
on my page I added select component and on the Firefox I have problem with select button. On the Chrome I have normal arrow down like this
but on Firefox button look like this. How I can remove background on Firefox?
You can do that by using a custom arrow. Refer to this. Hope that helps.
Im look as much as possible to avoid having to use a JS solution for this. But if that is my only option to get this working then ill bite the bullet.
I have a slide out nav section that has a toggle button in it.. this nav section covers a topbar that has a corresponding toggle button in it..
they both have hover animations using CSS3 animations applied to the :hover attribute. My issue occurs because both toggle buttons align with one another.. so when the nav is opened and closed you do not need to move your cursor.. because of this the :hover event doesnt appear to be getting triggered on the new element that is under the cursor until you move your mouse..
However, on Firefox they do appear to get triggered
I have had a look at people having issues with this to do with jQuery hover events not firing: here
If anyone knows of a css or html way to do this i would be very greatful. My fiddle is here:
http://jsfiddle.net/Lm2fa/1/
EDIT:to test this please click on the open/close menu button (top left hamburger) then without moving your mouse click the button again to close the nav.. you shoul only experience the :hover event when you click or move your mouse
EDIT:this seems to definitely be occurring on OSX Chrome, OSX Safari (havent got a PC to test with)
See http://www.tuxx.nl/internationaal/vliegafstanden/internationaal/. Now scroll down and you see a button bar and one button with Doorsturen on it. Now, it works fine in Chrome, Firefox, but in Internet Explorer 8 you can see an e-mail icon. I looked where it came from and I saw that Sharethis automatically puts an image inside the button. I tried to get rid of that, but that didn't work. How can I remove this image/icon?
Use firebug to see if it has classes and use css to hide it with display:none;
If it does not have any class/id you could try to catch it with css selector img[src="/*YOUR IMAGE SRC*/"
To better help you I need to see some code ;)
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.