Как стилизовать выпадающие выпадающие прямоугольники?
Я создал jsfiddle http://jsfiddle.net/CGDhB/
<div class="container">
<div class="salmatWrapper">
<div class="col-sm-12 contents">
<img src="http://staging.serviceportal.com.au/service05/alinta/images/header.png" alt="Energy Unit Conversion Tool" class="img-responsive" />
<div class="form">
<form class="form-horizontal">
<fieldset>
<div class="col-xs-6 left">
<!-- Enter Value-->
<div class="form-group">
<div class="col-xs-12">
<input id="custom1" name="custom1" type="text" placeholder="Enter Value" class="form-control input-md">
</div>
</div>
<!-- Convert From -->
<div class="form-group">
<div class="col-xs-12">
<select id="custom2" name="custom2" class="form-control">
<option value="" class="selectDefaultText">Convert From</option>
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
<!-- Convert To -->
<div class="form-group">
<div class="col-xs-12">
<select id="custom3" name="custom3" class="form-control">
<option value="" class="selectDefaultText">Convert To</option>
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6 right">
<!-- Textarea -->
<div class="form-group">
<div class="col-xs-12">
<textarea class="form-control" id="custom4" name="custom4">Result here ...</textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-sm-12">
<img src="http://staging.serviceportal.com.au/service05/alinta/images/footer.png" alt="Check our affordable electrity and gas packages!" class="img-responsive" />
</div>
</div>
</div>
</div>
Я хочу, чтобы выпадающие изображения выглядели так, как показано ниже.
В принципе, я хочу, чтобы этот маленький значок и выпадающие прямоугольники выбирались так, как показано на рисунке. Я смущен этим. Промежуточный канал можно посмотреть здесь http://bit.ly/1eNm3jv
Вы действительно не можете выбрать стиль. Насколько я знаю, единственное, что вы действительно можете сделать, это цвет границы и отступы. Возможно также размер шрифта. Как упоминалось в @setek, вам придется использовать какой-то плагин.
<select>
таким образом, внутренности находятся под shadowDOM, и большинство браузеров не позволят вам сильно их изменить. Uniform.js работает путем замены элементов формы, чтобы они могли стилизоваться, и при изменении обновит исходный элемент<select>
.