Need help with custom width selectboxes from www.ryanfait.com

Question

Has anyone used tried the custom select boxes from link text

I'm trying to find out how to make multiple select boxes at different width with the same image (with different widths)?

Anyone know how to do this?

Thank you.

Answer 1

Hey Erik, I have used this little script all the time, here is what I do to get this effect it's all css.

Below is an example and a photo of the output. What you have to do is add an id or class around the select list item you are using so that you can add rules to just that select list.

I download the example code from the custom select box example and modified the html and the css. The only thing you lose with this solution is rounded corners on the left.

GRAPHICS CHANGE

first you need to make a flexible graphic, I took there example and just made select.gif wider.

HTML CHANGES

Added an id to the p tag that wraps each select list. You could have each select list wrapped in a div I use the p tag because it was in the example.

<p id="list_1_id">
  <select name="list1" class="styled">
           <option value="1">Option 1</option>
           <option value="2">Option 2</option>
           <option value="3">Option 3</option>
           <option value="4">Option 4</option>
           <option value="5">Option 5</option>
  </select>
</p>


 <p id="list_2_id">
   <select name="list1" class="styled">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
   </select>
 </p>

CSS CHANGES

For the .select css the only thing you need to change is the background rule adding top right this way the background image floats to the right.

.select {
    position: absolute;
    width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. -this comment is from orginal code we change this below-*/
    height: 21px;
    padding: 0 24px 0 8px;
    color: #fff;
    font: 12px/21px arial,sans-serif;
    background: url(select.gif) top right no-repeat;
    overflow: hidden;
}

/* add width for each list item*/
#list_1_id .select{
    width: 168px !important;    
  }

#list_2_id .select{
    width: 258px !important;    
  }

RESULT

Here is what the result looks like: ** Note I did not test for IE 7

Answer 2

In addition,

You need a little change in the javascript file to complete the solution.

Based on theGoose answer:

Open the javascript file | original resource

1) Find

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth_long = "190"; /* default is 190 */

Replace with

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth_1 = "200"; /* default is 190 */
var selectWidth_2 = "290";

2) Find

document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; cursor: pointer; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');

Replace with

document.write('<style type="text/css">input.styled { display: none; } #list_1_id select.styled { position: relative; width: ' + selectWidth_1 + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; cursor: pointer; } #list_2_id select.styled { position: relative; width: ' + selectWidth_2 + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; cursor: pointer; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');