Нужна помощь с коробками выбора ширины от www.ryanfait.com

Question

Кто-нибудь использовал пробовал пользовательские поля выбора из текст ссылки

Я пытаюсь выяснить, как сделать несколько полей выбора с разной шириной одним и тем же изображением (разной ширины)?

Кто-нибудь знает, как это сделать?

Спасибо.

Answer 1

Кроме того,

Вам нужно немного изменить файл javascript, чтобы завершить решение.

Основано на ответе Goose:

Открыть файл javascript | оригинальный ресурс

1) Найти

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

Заменить на

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

2) Найти

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>');

Заменитьс

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>');

Answer 2

Привет, Эрик, я все время использовал этот маленький сценарий, вот что я делаю, чтобы получить этот эффект, это все css.

Ниже приведен пример и фотография вывода.Что вам нужно сделать, это добавить идентификатор или класс вокруг элемента списка выбора, который вы используете, чтобы вы могли добавить правила только к этому списку выбора.

Я загружаю пример кода из поля пользовательского выбора.пример и изменил HTML и CSS.Единственное, что вы теряете в этом решении, это закругленные углы слева.

ИЗМЕНЕНИЕ ГРАФИКИ

Сначала вам нужно сделать гибкий рисунок, я взял пример и только расширил select.gif.

ИЗМЕНЕНИЯ HTML

Добавлен идентификатор в тег p, который оборачивает каждый список выбора.Вы можете заключить каждый список выбора в div. Я использую тег p, потому что это было в примере.

<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

Для .select css единственное, что вам нужно изменить, это правило фона, добавив top 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

Вот как выглядит результат: ** Примечание. Я не тестировал IE 7