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.
Related
I have a div with the following css:
.someTopParentClass .someParentClass .someClass::selection {
background: #ffcc00;
}
This is working without reactjs.
The class does show in the inspector with the correct color, but the color is not really applied.
When using reactjs, the background on selection stays blue until I go into Chrome's inspector and only after I change any css property of any class - the selection becomes the correct color :/
The .someTopParentClass class is renders dynamically on button click.
My guess is that Chrome doesn't realize correctly for some reason that the parent class was added - although in the inspector it shows the correct .someClass and the correct color.
This issue seems to happen only in Chrome (Works in Edge,Firefox)
Update
I reproduced the issue in JSFiddle :
https://jsfiddle.net/rmindel/r3581ewt/
Where do I open a bug for Chrome :/ ?
For now my solution was to change the color of the text from black to #000001 so Chrome will know it needs to re-paint.
Opened a bug for Chrome:
https://bugs.chromium.org/p/chromium/issues/detail?id=685174#c6
The workaround for me is as stated -
"For now my solution was to change the color of the text from black to #000001 so Chrome will know it needs to re-paint."
I want to deactivate the Chrome's default CSS like the input field background-color and all other stuff but i dont know how. Someone can explain me what i should do ? I should add some piece of code to my CSS file i guess.
To be more specific one of my problems is that i want to make an input text field with black background with background opacity of 0.5 and with white text color. So i made it and it work on IE or Mozilla but doesn't work on Chrome.
So all i want is to make my website's css to look same on Chrome as on Mozilla or IE.
Don't use it on the radio or checkbox inputs any time as they can end up looking like an unuseful skinny rectangle.
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="file"]),
select,
textarea {
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
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
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 ;)
I'm getting a sort of glow-y blueish rollover highlighting of my YUI menu items when I'm in Safari and Chrome (but not Firefox). Cool though this is, it's not consistent with the rest of my site's highlighting, and I'd like to disable it. I'm guessing this is a webkit css property, but, if it is, haven't found the one(s) that control it. Can anyone point me to the right place? Thanks!
Try using this CSS rule with the appropiate selector:
outline-width:0;
Another simple tweak instead of this would be to use something like this:
outline-style:none;
you can apply this to something like this...
#element:focus {
outline-style:none;
}