Показать поле выбора в столбце

Я пытаюсь отобразить значения окна выбора в 4 столбцах. Как я могу это сделать. Я собираюсь использовать его на локальном сервере.

У меня есть изображения, чтобы показать вам, что я пытаюсь сделать.

это то, что я получил только сейчас.

http://www.thewebdesign.org/1a.png

Я пытаюсь превратиться в

http://www.thewebdesign.org/2a.png

это код, который я использую

<style type="text/css">
<!--

.myselectbox {

    font-family: Tahoma;
    font-size: 18px;
    background-color: #F5F5F5;


}
    option {
    font-family: Tahoma;
    font-size: 18px;
        background-color: #fef5e6;
        padding:8px;
        margin:5px;

        border-top: 1px solid #ebdac0;
        border-bottom: 1px solid #ebdac0;
        border-right: 1px solid #d6bb86;
        border-left: 1px solid #d6bb86;
    }
-->
</style>
</head>

<body>
<center>
<select name="amount_no1" class="myselectbox" id="amount_no1" >
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
</select> 
</center>
</body>
Источник

5 ответов

Это невозможно. Вам придется использовать JavaScript, чтобы настроить поле выбора. Вот список плагинов jQuery, которые вы можете просмотреть:

Плагины jQuery SelectBox

Источник

JS код:

document.getElementById("amount_no1").value = 4
Источник

Если это стандартный элемент выбора (не какой-то плагин), боюсь, это невозможно.

Источник

Вот быстрая попытка изменить ваш код. Не оптимально, но у меня не хватило времени

<style type="text/css">

.myselectbox {

    font-family: Tahoma;
    font-size: 18px;
    background-color: #F5F5F5;


}


ul {
  float: left;
  width: 12em;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  float: left;
  width: 6em;
  font-family: Tahoma;
    font-size: 18px;
        background-color: #fef5e6;

      padding:8px;
        margin:5px;

        border-top: 1px solid #ebdac0;
        border-bottom: 1px solid #ebdac0;
        border-right: 1px solid #d6bb86;
        border-left: 1px solid #d6bb86;

} 
</style>
</head>

<body>
<div>
<select name="amount_no1" class="myselectbox" id="amount_no1" onclick="document.getElementById('ul1').style.display='block'">
              <option value="1">1</option>
</select>
<ul id="ul1" style="display:none"> 
              <li onclick="document.getElementById('amount_no1').options[0].text = 2;
              document.getElementById('ul1').style.display='none'">2</li>
              <li value="3">3</li>
              <li value="4">4</li>
              <li value="5">5</li>
              <li value="6">6</li>
              <li value="7">7</li>
              <li value="8">8</li>
 </ul>
</div>
</body>
Источник

Я использую этот плагин ( http://www.marghoobsuleman.com/jquery-image-dropdown) для стилизованных выпадающих списков, потому что невозможно оформить стандартный выпадающий список. Плагин содержит файл CSS, где вы можете указать свои собственные стили, если хотите.

Источник
Другие вопросы по тегам