So I've got a standard dropdown menu in my HTML. I've also got the background colored, and I have a background image that I want to use as a button.
But there's a problem, because I can't get the default button to disappear in Firefox. Even though I can get the button to disappear in Webkit using -webkit-appearance:none; I can't get it to go away in Firefox.
Here's an example: http://jsfiddle.net/wG7UB/
And I'd prefer not to revert to a heavily styled unordered list if at all possible. Thanks!
What do you exactly want to do?I'm not sure i understand fully what exactly you're trying to do
if you want to make it disappear then you can use "{display: none}"
or you can use "-moz-appearance" property if there is any.
Here I go answering my own question... I just wrapped my select tag with a div, and used a pseudo element to cover up the button. Slightly hackish, and I don't like using the pointless div, but I guess it works okay. Then I set the CSS of the pseudo element to pointer-events:none; so that it would allow clicks through the image.
Example: http://jsfiddle.net/howlermiller/nchUt/1/
Related
I am creating a set of divs which the user can navigate through with tab, and I wanted to add the standard orange focus outline to the elements.
Does anyone know what I need to do to add it in? I know that it works off the outline property, but I'm not sure what color to set it as, or whether I'd be better off using a box shadow with a bit of blur to get the same effect.
Also, in case it's relevant, I'm using dojo and avoiding jquery - but hopefully this is a pure css solution :)
I would suggest this working jsFiddle, note that in order to accomplish this you will have to use <div tabindex="0"></div>.
Every browser renders the focus differently. In order to unify the entire experience on your website, I would suggest removing the browser outline with CSS and adding your own style.
As far as I know, only Chrome renders the orange outline, I've tried to match the color as best as I could, but you can always experiment on your own.
You can use the css :focus Pseudo selector
:focus {
declaration block
}
Although the div attribute does not accept input, so it cannot have :focus normally. So you would have to set the div's to have a tabindex attribute
take look at this:
http://www.templatemonster.com/demo/35403.html
In this template you can click on the image under the man's forearm even over the forearm itself.
The hand is not a part of images. It is three div pieces that has a png image as background.
How is it possible?
How Can I do the same thing (have a div that contains a linked image and have another div on it but the underlying link be clickable)?
Is it cross-browser?
Thanks
You could just add pointer-events:none in your stylesheet to the element you're trying to click through
Example here: http://robertnyman.com/css3/pointer-events/pointer-events.html
Check the checkbox to see how the grey box is able to be clicked through.
it's made with
pointer-events:none;
it don't works in IE and Opera, but that is in this case not really a problem. It just don't work over the arm itself.
In modern browsers you can use the pointer-events css3 property. Here is a famous question about this : Click through a DIV to underlying elements
I had to change the button color of an html select (combobox), but since it is not posible to add an image directly to the button of a select, what I did was setting an image behind the combobox, and then making the combobox transparent "filter:alpha(opacity=0);" in iexplore and "opacity:0;" in firefox.
This way, you do not see the select, instead, you see the image (what is like a select, but with other color, and since the select is on top of the image (greater z-index) when you click, you are clicking the select. And when it shows the options, yes, you can see them.
The problem is that I need it to work in Firefox, Chrome AND IEXPLORE.
There is no problem with Firefox and Chrome, but the text of the options in Iexplore, appears without the antialias it gets in the other browsers. All the text of the page is antialiased, so I need this to be also antialiased.
I have seen how to make it, but it works if the text is inside a div, a H1 but not if it is in the options of a select.
For example:
http://www.useragentman.com/blog/2010/09/02/how-to-make-cleartype-font-face-fonts-and-css-visual-filters-play-nicely-together/
But it does not work in a select :(
Thanks in advance!!
I seem to remember IE doesn't let you color the background on an <option> only on the entire <select>. The hack you describe requires a background color and chroma so maybe try setting them on the select element.
Alternatively there are javascript solutions that implement select using non-native elements. By avoiding the rendering of a native select you avoid triggering bugs that are unique to IE's implementation of form elements (which uses native system objects). There are too many implementations to list so just search for 'custom javascript dropdown'.
i'm solving a problem to make select inputs look the same in all browsers (Chrome and Safari on Mac renders them differently) how to do that ?
The ONLY way to make them look the same right now would be to hide the original inputs, and replace them with appropriately styled html equivalents (of god forbig Flash objects), which would act as proxies, passing the functionality over to the hidden inputs.
That may be automated with JavaScript. But that would be WRONG. You are not supposed to force a different look on to OS styled elements of the webpage. It conflicts with a lot of usability and accessibility practices.
So, the only way is to make your design flexible enough to support differently looking control elements on a web page, and also use different stylesets for different browsers, to ease the adjustment of the styles (at the moment there are no inputs that would look and act the same on all browsers with the same style rules applied).
Unfortunately, life just kinda sucks on this one. Just wait till you need to style a file input...now that's some fun!
if you dont mind using js you can simply design your own look (a jpg img it can even be the same img as the original select element or if you wish you can model parts of it in css)
Then place a div on top of that image that div will contain the text which select element would usually contain
<div id="selectTxt" >
then set another div on top of that with the select element inside it.
<div id="transparentSelect" class="transparent">
<select id="selectCar" name="selectCar">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
</div>
Now the trick is to set the select element opacity to zero
you can do this by adding by adding a class transparent
and then applying the class to the div
.transparent
{
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
now the element is hidden but when you click on it the list will still show up.
So the list will always look like the default list in the browser
now use js to extract the select value every time you click on the select
and set the inner html of selectTxt div to its value.
This way you get the text of the select on top of an image you want
you can make the image animated with the hover effect in css or with js
I also make a select that looks the same in all browsers but it doesnt work when you click directly on the arrow...
so its an inferior version but if you wish to look at it here it is
http://jsfiddle.net/fiddlerOnDaRoof/LM73V/
it also lacks the arrow image but you can print screen that from your browser
good luck
You should apply a CSS to reset the styles (not just for the inputs, this is a highly recommended practice for all element so that your page looks almost the same in all browsers) there are many, just google a little, for example this one, and then apply your desired styles (border color and width, background, etc...) take a look at this tutorial on how to style form elements
I've found a very strange thing.
I was complaining about it before, but nobody sees old questions here.
Here's an example.
It works perfectly in Opera only... In Firefox, Chorme, Safari and IE8 there's a border around this button... And I have no idea WHY? How to delete the border?
Thanks.
Thats because you have set a type of image and not defined an image url... you have set the background image using CSS.
Change your element to a span or such and this will fix the issue, also add cursor to be a pointer in css too, this will give the user the idea to click it.
then use an onclick event for the submit.
As others have noted, you have defined an "image"-style button but not provided a source URL, resulting in a broken image.
The simplest solution is to change type="image" to type="button", which removes the broken image icon and border.