I'm working on building new site , i need a drop down menu to select the amount of something in my site . but this drop down menu has a style that i have to make it.
the style of this drop down menu is that the drop down box has no arrow - the arrow that appear on the right to click on it and open the drop down items-.
I have made many searches and I hove found this style property :"-webkit-appearance:none ", in the class of the drop down list ,I have put this property and the arrow has been disappeared using the google chrome browser.
but the "problem" is : this property is not working on the Firefox browser , the arrow has not been disappeared .
i will give you a simple view to see how this arrow has not been disappeared in the Firefox browser :
here is the chrome view as the drop down menu without the arrow:
my question is :
is there CSS style property to make a drop down menu without this arrow in the "Firefox" browser ?
-webkit prefixed properties are respected by Safari and Chrome only, for Firefox, you need to use -moz prefix. When you use -webkit, Firefox will just skip the property and will move ahead, thus it spoils your select design.
Though, you can achieve the above with a lil hack, wrap your select tag using a div, assign fix width to your div, and than use greater width for your select tag. Now use background-image for your select, and use overflow: hidden; for the wrapper
Demo
div {
width: 200px;
border: 1px solid #f00;
overflow: hidden;
}
div select {
width: 220px;
background-image: url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/256/Download-icon.png);
background-size: 13px 13px;
background-repeat: no-repeat;
background-position: 180px 5px;
}
This way, the above will give you better cross browser compatibility, and you don't have to use prefixes as well.
You can try your luck with:
-moz-appearance: none
But this is a non-standard property..
You can read more about it HERE
for example:
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
but ie still not cover(
Or may be you want to use plagin jquery https://select2.github.io/, but I think, is not very appropriate if you wont castomise only one select.
Related
I am trying to apply a filter on the entire webpage for creating an inverted view of the page. The page has fixed-positioned elements (some buttons and block). So the easiest way is to invert the color of each element on the webpage, including fixed position buttons. To invert the colors I use the following css code:
html {
filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
-webkit-filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
}
This works fine in chrome, but not in firefox. The inverting works but it changes the position of two buttons that are defined as follows:
#topbtn {
display: none;
position: fixed;
width: 40px;
height: 40px;
overflow: hidden;
outline:none;
bottom: 20px;
right: 20px;
z-index: 99;
}
I have tried to change the filters but no luck. No error is shown. I know this may be duplicate of similar issues in Firefox. But, the other questions are mostly to deal with some div or some element inside another element.
IMO, this question is different as the filter applies to the entire page and I don't want to apply the filter to each element one-by-one too naive.
I hope someone has already encountered and solved the problem for Firefox (especially the dark mode theme guys).
There are numerous duplicates of "how to click through a div with CSS" but my situation seems to be a little different.
I'm using -webkit-appearance and -moz-appearance to make a div look like a text area, but this isn't perfect in some browsers... the bottom right corner doesn't show the nwse cursor like it does in some browsers. I want to overlay a div with cursor: nwse-resize, but I also want to be able to click through this div so that the faux text area can actually expand. pointer-events: none does what it is supposed to do... however, I lose my nwse cursor.. which was the entire point of this.
html (GWT UiBinder):
<div class="faux-text-area">
<div class="expando-div"/>
</div>
css:
.faux-text-area {
position: relative;
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
}
.expando-div {
position: absolute;
bottom: 0;
right: 0;
height: 10px;
width: 10px;
cursor: nwse-resize;
}
Adding pointer-events: none understandably removes my cursor CSS definition.
There is also Add CSS cursor property when using "pointer-events: none" but the accepted solution to this question is to simply put the cursor CSS on the parent element, but in my case... the parent element is the entire faux text area and I want only a portion of it to have a resize cursor. This solution will not work for me.
Are there any simple and elegant CSS solutions to making this div click through without pointer-events: none? I have a feeling I am stuck with a non CSS answer, given the limitations of webkit-appearance and moz-appearance, but I figured I'd ask the community first before doing heavier lifting.
Alternative approach (Not quite CSS only... but with a little JQueryUI needed):
I've removed:
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
And I've added:
resize: vertical;
Which makes the plain div appear as a text area (at least in Firefox and Chrome)... to fix in IE (recall I am developing in GWT):
private native void makeResizableInIE() /*-{
$wnd.$("my_divs_id").resizable();
}-*/;
Still not super thrilled that this requires an IE hack.. but with the previous CSS properties, there wasn't much of an equivocal hack like there is with the resize property.
I have a div with a width of 200px and overflow set to hidden. In Firefox, Safari & IE the select obeys the style rule and displays correctly. However in chrome the select element doesnt follow the rule set and flows over the div.
The site is at http://conaty.hailstormcommerce.com/index.php?route=product/category&path=20
this issue was with the background property of the select element.
I think you might have described the issue incorrectly in your question.
It looks like you're trying to create a custom drop down arrow for the select element. The select element is the correct width you set and the overflow is hidden by the div. However, in Chrome, the select has a white background that covers your custom arrow and is unaffected by your background: transparent !important; declaration.
To fix this so that your custom arrow shows through, you just need to add -webkit-appearance: none; as below:
.selectContainer select {
background: transparent !important;
cursor: pointer;
-webkit-appearance: none; /* add this */
}
In addition to Diodeus answer, you have min-width of 220px specified on this element.
Do this:
width:100%;
min-width:0;
SELECT is known to behave like this. It behaves more like a control in the OS than an element in HTML (as do radio buttons and checkboxes). All you can do is hard-code the width to prevent it from overflowing.
I think most of us know about this annoying bug in IE7 where the background image of a text input will scroll if the text entered is longer than the width of the text input.
Numerous questions have been asked and blogged.
Those questions and post all require one to wrap a div around the text input. This is something that I cannot do as I am working with markup generated by a CMS.
However, I would like to gracefully degrade the experience. For IE7 and below, I am happy with not displaying the background image and just displaying a color.
This is the css being used:
form input[type="text"], form input[type="password"]{
background-image: url('bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding-left: 4px;
padding-right: 4px;
width: 100%;
height: 30px;
border: #008296 1px solid;
}
I have tried adding background-attachment: fixed but the background-image ceases to be shown in all versions of IE, firefox and chrome! Since I only want this behaviour for IE7 and below, how can I go about doing this besides creating an IE7 only stylesheet?
You could always use an IE7 specific CSS selector filter to override your desired styles for IE7.
To make a class that applies only to IE7, simply put *:first-child+html in front of your classname.
Another option is to declare CSS rules that are specific to IE (aka IE CSS hacks). This would involve putting an asterisk (*) before the attribute that is only to apply for IE7 and below. This isn't as highly regarded though since it is not valid CSS syntax.
You may find this site interesting for dealing with IE and CSS hacks: http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml
I have a problem with the IE (what else?):
I generate content with CSS which has also a background-image.
I looks like that:
#nav ul li:after {
content: "--";
position: relative;
z-index: 99;
background: transparent url(image.png);
color: transparent;
}
The text color is in non-IE-browsers transparent, but in all IE browsers (IE6-IE8) it's black and you could see it.
How could I make the text transparent/unvisible?
I tried already: visibility - opacity - filter - text-indent ...
But none did his job right, either it disappears (with it background which I need) or the attribute doesn't apply.
if what you're trying to do is show the image as background and not showing the text use
font-size:0px
it works!
what about using line-height
line-height:0;
it worked in my case.
I get it: With the correct padding and a zero font-size! Set the padding-left value to be one pixel beyond the image width.
If this doesn't work in Internet Explorer 8
font-size: 0;
make sure you're using a valid doctype:
<!DOCTYPE html>
This should work. If it doesn't add display: block or inline-block
.transparent {
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
}
I think no versions of IE support color: transparent
Perhaps you could try to do it with jQuery or something like that.
I assume you already fixed this, but lately i've used a very large line-height, when text-indent is giving me layout problems, combined with overflow: hidden to hide the text.
IE doesn't support li:after consistently. Which IE are you talking about? IE6? IE7? Both?
For me color:transparent was not working in IE8, and it was showing text with default color. I used visibility:hidden; for IE8 only as the text was not required to display.
Hope this help in case, if the element is not required to display.
I see you're using a PNG as your background image. Normally, if you're using IE 6, there is a fix for PNG transparency (http://www.twinhelix.com/css/iepngfix/). Even so, this will not work with background-images. So if you're using IE 6, there really isn't a fix.