HTML Выберите padded с проблема в поиске

Ответ 1

Как обернуть его в div:

HTML:

<div class="listwrapper">
    <SELECT id="mylist" size=5 >
        <OPTION Value="100">100</OPTION>
        <OPTION Value="200">200</OPTION>
        <OPTION Value="210">210</OPTION>
        <OPTION Value="211">211</OPTION>
    </SELECT>
</div>​

CSS

.listwrapper
{
    padding: 0px 0px 0px 15px;
    border: solid 1px silver;
    width: 50px;
}
.listwrapper select,
.listwrapper select:active
{
    border: none 0px white;
    width: 50px;
}
​

Моя сценария

Ответ 2

<style> является встроенным элементом, поэтому добавление дополнения не будет работать в IE6, однако с display:block; это можно преодолеть

использование

<style>
    #mylist
{
    padding-left:10px;
    display:block;
}
</style>​ 

Надеюсь, это поможет. Заклинание здесь

Ответ 3

Попробуйте использовать выравнивание в CSS

​select { width:auto; }
option { text-align:center; }

Это действительно работает. Вот доказательство в jsfiddle

Ответ 4

дать левое дополнение, необходимое для перемещения параметров

#mylist
{
  padding-left: 10px;
}

проверьте fiddle

Ответ 5

Да, ответ Виджей - правильный путь. Мы всегда должны использовать CSS, а не другие.

Вот пример: -

<select  size="10" style="text-align:center">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Four</option>
</select>

Установка размера не является обязательной.

Надеюсь, что это полная помощь.

Ответ 6

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

if (!dimon) {
	var dimon = {};
}
if (!dimon.select) {
	dimon.select = {
		/**
		 * Contains last typed character, and last selected option value
		 * (integer). For example, { "AlternativeMobileSelectionMenu" : { "char" :
		 * "s", "index" : 115 }, "AlternativeTariffSelectionMenu" : { "char" :
		 * "a", "index" : 0 } }
		 */
		hist : {},
		search : function(select, e) {
			// JQuery select object
			var select = $(select);
			if (!select) {
				return;
			}
			// id of HTML select, which is located under 0 index
			var sid = select[0].id;

			// dynamic HTML event
			e = e || window.event;
			var keycode = e.which || e.keyCode;
			keycode = String.fromCharCode(keycode);
			// Search should be case-insensitive
			keycode = keycode.toLowerCase();

			if (keycode < 'a' && keycode > 'z') {
				// handle only alphabetic character is typed
				return;
			}

			// Prevent default browser behavior
			if (e.preventDefault) {
				e.preventDefault();
			} else {
				e.returnValue = false;
			}

			if (!this.hist[sid]) {
				this.hist[sid] = {};
			}
			var lastChar = this.hist[sid]['char'];
			if (keycode != lastChar) {
				// if a new character is typed, reset
				// last typed character
				this.hist[sid]['char'] = '';
				// and last selected option
				this.hist[sid]['index'] = -1;
			}

			// options which matches the input character
			var filteredOptions = new Array();
			// all select options
			var options = select.find("option");

			for (var i = 0; i < options.length; i++) {

				var opt = $(options[i]);
				// Example option text
				// "  30|25   █ Magenta Mobil L mit Top-Handy"
				// "                  Sony Xperia Z2 schwarz (1,00 EUR)"
				var text = opt.text().toLowerCase();

				// Regular expression finds the first alphabetic character
				var regexp = new RegExp("[^a-z]*([a-z]{1}).*", "i");
				var result = regexp.exec(text);
				// the output will be:
				// 'm'
				// 's'
				text = result != null ? result[1] : '';

				if (opt.val() != '' && text.indexOf(keycode) == 0) {
					// add option value, if it matches
					filteredOptions.push(opt.val());
				}
			}

			var size = filteredOptions.length;
			if (size == 0) {
				return;
			}

			// Example, if we have 2 mobile devices in the list
			// Samsung Galaxy S5
			// Sony Xperia Z2
			// and type 'S', then Samsung will be selected,
			// if we type 'S' for the second time, then Sony will be selected,
			// and if we type 'S' once again, then Samsung will be selected
			// again.
			// value of the first suitable option
			var firstOpt = parseInt(filteredOptions[0]);
			// value of the last suitable option
			var lastOpt = parseInt(filteredOptions[size - 1]);
			// Last selected option value
			var lastSelected = this.hist[sid]['index'];

			if (lastSelected == -1) {
				// Character is typed for the first time
				this.hist[sid]['char'] = keycode;
				this.hist[sid]['index'] = firstOpt;
				select.val(this.hist[sid]['index']);
				select.change();

			} else if (lastSelected >= 0 && lastSelected < lastOpt) {
				// The same character is typed, just increment the option value
				this.hist[sid]['index'] = lastSelected + 1;
				select.val(this.hist[sid]['index']);
				select.change();

			} else if (lastSelected >= 0 && lastSelected == lastOpt) {
				// The same character is typed, but the last suitable option was
				// already selected before.
				// So select the first option again
				this.hist[sid]['index'] = firstOpt;
				select.val(this.hist[sid]['index']);
				select.change();
			}
		}
	}
}

<html>
<head>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
	<select id="devices" size="1"
		onkeypress="dimon.select.search(this, event)">
		<option value="0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Apple iPhone
			5s 64GB Gold (199,95 EUR)</option>
		<option value="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Samsung
			Galaxy S5 LTE+ weiß (1,00 EUR)</option>
		<option value="2">&nbsp;30|25&nbsp;█&nbsp;Sony Xperia Z2
			Tablet LTE+ (19,95 EUR)</option>
		<option value="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sony Xperia
			Z2 schwarz (1,00 EUR)</option>
		<option value="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sony Xperia
			Z2 weiß (1,00 EUR)</option>
	</select>
</body>
</html>

Ответ 7

Я сделал это, я предполагаю, что вы хотите что-то вроде этого: MyFiddle

<style>
    option {
    width: 40px;
    text-align: center;
    }
</style>

<SELECT id="mylist" size=5 >
   <OPTION Value="100">100</OPTION>
   <OPTION Value="200">200</OPTION>
   <OPTION Value="210">210</OPTION>
   <OPTION Value="211">211</OPTION>
</SELECT>

Ответ 8

Используйте & nbsp, чтобы получить правильное заполнение в IE и использовать ключевое событие для выбора элементов на основе нажатой клавиши.

Ответ 9

Это может быть частью вашей проблемы с IE6/7:

Значения CSS по умолчанию IE

Тупое место для размещения значений CSS по умолчанию. IE8 и новее, похоже, не имеют этой проблемы.

Ответ 10

У jQuery есть решения для этого, или вы можете использовать событие onkeypress для выбора элементов.

HTML

<element onkeypress="JavaScriptCodeHere">

JS

object.onkeypress="JavaScriptCodeHere"

Измените JavaScriptCodeHere своим JS script, чтобы вывести цифры на основе нажатия клавиши. Я не собираюсь делать это за вас, поскольку это не то, для чего предназначен этот сайт, но я могу указать вам в правильном направлении.

keychar и numcheck могут помочь;)