The goal is to make the drop down arrow for a <select> list disappear by setting the appearance property using JavaScript.
It:
Works for Chrome
Does not work for Firefox
For Firefox, the drop down arrow can be made to disappear by setting the appearance property in the style section. Whiskey Tango Foxtrot :)
Thanks for any help you can give.
To see the problem,
Run the page in Chrome. The drop down arrow will not appear. Good,
the JavaScript line for Chrome lower down on this page does its job
Run the page in Firefox. The drop down DOES appear. Bad, the
comparable JavaScript line for Firefox lower down on this page
DOES NOT do its job
Uncomment the line on CSS and run the page in Firefox. The dropdown will disappear.
//The next line works correctly for Chrome, it makes the drop down arrow disappear
//document.getElementById("mySelect").style.webkitAppearance = "none";
//The next line does NOT work for Firefox, the drop down arrow STILL appears
document.getElementById("mySelect").style.mozAppearance = "none";
select {
/*-moz-appearance: none; */
}
<select id="mySelect">
<option>red</option>
<option>green</option>
</select>
So, for Firefox, why does setting the property in JavaSript not work?
Related
I have a toolbarbutton of type menu-button which is working perfectly in my Firefox extension, however it's not styled quiet as I'd like.
There is a gap with an outline between the buttpon image and the dropdown marker arrow (the red arrow shows the outlined gap I'm referring to - the outline is part of the problem - and you can also see the AdBlock Plus button which does not have this problem).
Also, when you hover over the image/button a shaded grey background appears.
I'd like to remove the gap (AdBlock Plus manages this with their toolbar button but I haven't figured out how) and also remove the shading (I hava hover image defined for the button which should be sufficient to indicate that you are in the click-zone).
Can anyone give me any pointers? It seems to be something to do with the following two classes: toolbarbutton-1 and chromeclass-toolbar-additional
Thanks,
FM
The gap is because the type is "menu-button", and ADP button type is "menu". The gap style is depend on the theme you are using.
The image problem, how do you setup the image? In my case, it work fine to setup with
button.style.listStyleImage = 'url("chrome://referrercontrol/skin/icon24.png");'
I was looking at how to change the cursor over an HTML5 canvas when dragging the mouse...
Came across this: Change cursor over HTML5 Canvas when dragging the mouse
seemed logical that an :active pseudo-selector would do the trick...
When I used it on my page, however, the cursor set by the rule in the :active pseudo-selector was ignored, instead showing the text selection cursor.
In firefox, this behavior is not present - it obeys the cursor property I set.
Here's an example to demonstrate the behavior.
Any idea how to fix this in chrome?
Working Fiddle
Add the following for Chrome to turn off text selection while dragging and dropping.
document.onselectstart = function(){ return false; }
This has been answered a few times,
chrome sets cursor to text while dragging, why?
Click and Drag Cursor in Chrome
I may be trying to get too fancy on this one.
I have a pair of radio-like buttons in a row with a divider between them with background images. When one of the 'buttons' is clicked, I change its class. The CSS for the divider is keyed to the classes of the buttons on either side to select a background image. I am doing this with CSS 'sibling' selectors.
I have jQuery .click events tied to the 'buttons'. the first thing they do is clear the 'selected' class from the other button and set it on the button that was clicked.
For example, if the LEFT button class='selected' and the RIGHT button is not, the divider between them will get a blue background. Click on the RIGHT button and it gets class='selected' while the LEFT button's class is cleared. The divider turns red.
This works in IE, FF, Safari, etc. But IE is odd (IE7) - it will only reflect the divider background change when I mouse OFF the button I clicked! That is, in the example, the RIGHT button gets class='selected' and changes immediately on the click. But the divider stays blue until I mouse off the button, then it turns red.
The class itself IS changing and the button's appearance changes as a result. It's only the neighboring stuff that doesn't!?
It reminds me of my old VB6 days when you had to periodically call 'DoEvents' to get Windows to make UI changes. Could there be something similar here for IE?
I have no idea why this helps, but adding .hide().show() to a selector that includes the stuff that changed class seems to make it update.
I've read that using setAttribute to change the class will force IE7 to re-render the styles. Try that, and if it still fails, I've solved a similar IE7 problem by rewriting the html, which forced IE7 to re-render (using jquery):
if ($("html").hasClass("ie7")){
var tempHolder = $("#ajaxresults").html();
$("#ajaxresults").html(tempHolder);
}
As for giving the html or body tag the ie7 class, I recommend taking a look at html5boilerplate.com. If for some reason you can't use their solution, the jquery for it is:
if ($.browser.msie){
if ($.browser.version < 8){
$("html").addClass("ie ie7");
}
else {
$("html").addClass("ie");
}
}
This is a CSS-Question.
In this fiddle you can see a button.
It has got two span-elements inside. One with float:left; the other with float:right;.
The style is a normal button-style.
When clicking that button on the iPhone or hover it in a Browser the style gets lost.
This is because I changed the background-color.
Is there a way to change the background-color without losing the whole button-style?
EDIT:
Here are the two images: The first button is a normal button-element. The second button is a button where I changed the background-color ... this is what it looks like when I'm hovering over a button.
I think I understand what you mean. It looks like the rounded corner is gone when hovering, while a border is added. I'm afraid there's not a easy way to get what exactly you want, as the behavior & appearance of Button is controled by system.
Maybe you can try to replace it with a div, which you have full control of the style (chaning the style via JS when hovering).
All's working fine for me. However floating-right elements should always be placed before floating-left elements. Don't know if it will change anything.
Do you know why Chrome sets cursor's shape into the "text" one, when over an open selectbox ?
If I set the CSS to:
select {
cursor: pointer;
}
It sets the cursor when the mouse is over the selectbox, but when you click to open the list, it comes back to the "text" shape again.
Do you know how to change it to a pointer or something else when the selectbox is open ?
Thanks!
Mickael.
Being able to actually style the options of a select box is something supported differently by different browser. If this does not work in Chrome, it does not seem to support that.