Drop Down arrow won't go away in mozilla or ie

Question

I have developed a website in asp.net and i have four drop down lists that are connected to an access database. The thing is when I view in firefox or ie there is a default drop down arrow which i don't want, but if I view in chrome it is not there. I have tried adding these to my style class:

 -moz-appearance: none; opacity:0; overflow:hidden; width:120%

as well as

 -moz-appearance: button; overflow:hidden; width:120%; opacity: 0

and I have had no success, and I am well, stuck. any help is greatly appreciated

here is my dropdown list:

<asp:DropDownList id="DropDownList3" 
                        runat="server" 
                        AutoPostBack="True" 
                        DataSourceID="SqlDataSource1" 
                        DataTextField="Plant" 
                        DataValueField="Plant" 
                        min-width="156px"
                        width="120%";
                        Font-Bold="true" 
                        Font-Size="x-Large" 
                        style="margin-left: 250px; margin-top:-44.5px;
                        margin-bottom:-20px; 
                        background-color: #FFFFFF; box-shadow:none; 
                        outline-color: #FFFFFF;
                       -moz-appearance: none;
                        overflow:hidden; appearance: none; 
                       -webkit-appearance:none;
                        border: none;
                       text-align: right;" 
                        Enabled="False">
                </asp:DropDownList>

See this question: http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox — eclipsis, Jul 29 '13 at 20:07

score 1 · Accepted Answer · answered Jul 29 '13 at 20:10

1

Simple placing dropdown into a container DIV of a lesser width with overflow:hidden should do the trick, for example:

<div style="width:200px; overflow:hidden" >
    <asp:DropDownList ID="DropDownList1" runat="server" style="width:220px">
    </asp:DropDownList>
</div>

answered Jul 29 '13 at 20:10

Yuriy Galanter

38,833
15
69
136

This unfortunately did not work for me as the values of the list were no longer displayed – foobar2023 Jul 29 '13 at 20:26
What do you mean no longer displayed? This approach shouldn't really affect the dropdown list at at all, worst case - cut off some text in the control itself – Yuriy Galanter Jul 29 '13 at 20:28
Here's jfiddle with the example (dropdown reders as SELECT): http://jsfiddle.net/zD2xF/ – Yuriy Galanter Jul 29 '13 at 20:30
Well when I do it I no longer displays the drop down values – foobar2023 Jul 29 '13 at 20:33
Can you copy rendered HTML for your dropdown (including container) and paste it into jfiddle? – Yuriy Galanter Jul 29 '13 at 20:44
1

Small update: Removed margin styles and restored missing overflow: hidden in the DIV: http://jsfiddle.net/Lwudc/3/ is this the intended behavior? – Yuriy Galanter Jul 30 '13 at 17:43
Yes but I need those margins as those were the precise location I wanted them on the page – foobar2023 Jul 30 '13 at 17:46
You can apply the margins to the DIV: http://jsfiddle.net/Lwudc/4/ in this example I left only `margin-left` because negative `margin-top` would take it outside of the page. It should work with other elements present above div – Yuriy Galanter Jul 30 '13 at 17:56
1

Here is jFiddle with all your margins applied to the container DIV: http://jsfiddle.net/Lwudc/5/ – Yuriy Galanter Jul 30 '13 at 18:06

score 0 · Answer 2 · answered Jul 29 '13 at 20:07

Try assiging the CSS display:none; value

style="margin-left: 250px; margin-top:-44.5px;
                        margin-bottom:-20px; 
                        background-color: #FFFFFF; box-shadow:none; 
                        outline-color: #FFFFFF;
                       -moz-appearance: none;
                        overflow:hidden; appearance: none; 
                       -webkit-appearance:none;
                        border: none;
                       text-align: right;
                       display: none;"

This unfortunately did not work for as it did the values were no longer displayed — foobar2023, Jul 29 '13 at 20:25

score 0 · Answer 3 · answered Jul 29 '13 at 20:08

0

Setting the following should do the job in mozilla.

text-indent:10px;

This property will push the default dropbox button under the select area.

answered Jul 29 '13 at 20:08

v2b

1,436
9
15

this worked on firefox but it did not have the same effect on ie – foobar2023 Jul 29 '13 at 20:26

Drop Down arrow won't go away in mozilla or ie

3 Answers3