3

By using a guide, I created a div that hides overflow and push the normal select arrow off the right side so it can't be seen. By using a custom background image on the outer div, I get my own download arrow. However, for long values of options, the text runs on top of my custom arrow image. I tried adding padding to the select value so the text would stop just before the arrow, but this pushes the default arrow back into view instead of adding space between the option text and the arrow. How can I keep the text from running on top of my arrow?

Oh! And the code to keep chrome from putting orange boxes around my select boxes doesn't work either.

JSFIDDLE here: http://jsfiddle.net/not_a_generic_user/yLy7Y/1/

.styled_select {
    border-radius   : 5px;
    border          : 1px solid #666;
    overflow        : hidden;
    margin-bottom   : 14px;
    position        : relative;
    background      : url('graphics/downarrow.png') no-repeat right -1px;
    cursor          : pointer;
}

.styled_select select {
/*  padding-right   : 40px;         /* So drop down items with long names don't have text over the down arrow */
    width           : calc(100% + 30px);
}

select {
    background      : transparent;
    font-size       : 13px;
    text-transform      : uppercase;
    font-weight     : bold;
}
select:focus {
    outline         : none;         /* kill the orange outline on select but doesn't work*/
    -webkit-appearance  : none;
}

<div class="styled_select ">
    <select id="list_position" name="">
    <option value="-1">No Change</option>
    <option value="0">On top</option>
    <option value="list_49">After Movies to Watch</option>
    <option value="list_50">After Anniversary Party Supplies and MORE!</option>
    </select>
</div>
not_a_generic_user
  • 1,906
  • 2
  • 19
  • 34
  • 1
    just a suggestion, you may want to try http://jsfiddle.net/ and create a fiddle of your actual page so others know exactly what you meant. – Jacky Cheng May 13 '14 at 10:27

3 Answers3

3

Your select is always going to run over the top of the arrow as your arrow is the background of the div which is behind the select.

With a bit of css3 you should be able to achieve what you want:

.styled_select {
    display:block;
    width:150px;
    height:20px;
    border-radius   : 5px;
    border          : 1px solid #666;
    overflow        : hidden;
    position        : relative;
}

.styled_select:after {
    content     : url('http://www.goodpricescome.com/graphics/downarrow.png') no-repeat right -1px;
    display:block; 
    width:25px; 
    height:25px;
    position:absolute; 
    right:0;
    top:0;
    pointer-events:none;
}

Example

You will also note in my example I have changed your containing div into a label for better accessibility

If you don't want to use :after try this

Pete
  • 57,112
  • 28
  • 117
  • 166
  • I thought you couldn't put html in an "After" clause so I have no idea how this works, but it does. I don't suppose you have any clues for getting rid of the orange outline when selecting the dropdown? – not_a_generic_user May 13 '14 at 11:55
  • @not_a_generic_user which browser shows the orange outline? The after works as you can use url in content to load an image, but you can't put other html elements in – Pete May 13 '14 at 12:19
  • Chrome and Firefox both show the orange outline. Neither responds to the "outline:0" or "outline:none" command. – not_a_generic_user May 14 '14 at 06:35
  • Also, I found that the fix you showed dosn't seem to work in Firefox, though your second option without :after seems to. I'll try that one isntead. – not_a_generic_user May 14 '14 at 06:42
  • Which version of chrome and firefox are you using as I don't see the orange outline in either? – Pete May 14 '14 at 07:32
  • Nevermind. I had an added border in my CSS to do a custom field highlighting. It's fixed now. – not_a_generic_user May 14 '14 at 10:20
0

Your <select> is wider than your <div> (which I presume is to hide the arrow), but this is what is making the text overlap the background image.

Without reducing the width of the <select>, and therefore showing the arrow, this isn't going to be easily achieveable without using CSS3 (which is not supported in some older browsers, specifically IE < 9) or Javascript (which you may not want to use).

See here for solutions to removing the arrow, but it is difficult to achieve cross-browser.

You may wish to use a dedicated library for this effect instead such as Chosen.

EDIT - Try outline: 0; instead of outline: none;.

Community
  • 1
  • 1
Manno
  • 399
  • 1
  • 3
  • 12
  • It seems that the answer above worked perfectly for the image, but I am still stuck on the outline issue. Neither command works for either Chrome or Firefox. – not_a_generic_user May 14 '14 at 06:37
  • It sounds like Chrome is still adding a border around the `
    ` or something. You can test this with `*:focus { outline: 0; }`. If that works then you need to find out what Chrome is applying the border to and set your `:focus` rule on that element.
     – Manno May 14 '14 at 10:19
  • Nevermind. I had an added border in my CSS to do a custom field highlighting. It's fixed now. – not_a_generic_user May 14 '14 at 10:20
  • Glad you've got it fixed! If the accepted answer or mine have helped in any way we'd appreciate an upvote. :) – Manno May 14 '14 at 10:29
0

I've modified the fiddle abit, with some added javascript, which I am not sure if you're ok with. take a look.

http://jsfiddle.net/yLy7Y/5/

the core idea is to adjust the width according to text length, but extremly long string might break it.

function change(){
    var d = document.getElementById('list_position');
    document.getElementById("main_select").style.width =    (d.options[d.selectedIndex].text.length*8+40)+"px";
}
Jacky Cheng
  • 1,536
  • 1
  • 10
  • 22
  • That definitely won't work. The width is based on the location in the page. If on the sidebar, it's about 175px. If somewhere else, it's similarly constrained. – not_a_generic_user May 13 '14 at 11:50