В настоящее время я играю с формой, которую я создал. Форма имеет три входа, первые два из которых являются выпадающими списками, а последний вход - обычным текстовым полем. Это мой HTML-код для формы:
<div id="form-main">
<div id="form-div">
<form class="form" id="form1">
<p class="sendingfrom">
<select name="sendingfrom">
<option value="africa">Africa</option>
<option value="USA">USA</option>
<option value="Australia">Fiat</option>
<option value="Fiji">Fiji</option>
</select>
</p>
<p class="sendingto">
<select name="sendingto">
<option value="africa">Africa</option>
<option value="USA">USA</option>
<option value="Australia">Fiat</option>
<option value="Fiji">Fiji</option>
</select>
</p>
<p class="weight">
<input name="weight" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Weight" id="weight" />
</p>
</form>
</div>
</div>
Я хотел бы настроить внешний вид формы с помощью CSS. Однако похоже, что мое кодирование CSS не влияет на визуальный вид раскрывающихся списков, за исключением текстового поля "weight". Это код CSS, который я применил к моей форме:
#form-div {
padding-left: 35px;
padding-right: 35px;
padding-top: 35px;
padding-bottom: 50px;
width: 500px;
float: left;
left: 471px;
position: absolute;
margin-top: 30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
top: -11px;
}
.feedback-input {
color:#3c3c3c;
font-family: Helvetica, Arial, sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #efefef;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 3px solid #34495e;
color: #34495e;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:#bdc3c7;
}
Я уверен, что мне не хватает чего-то в кодировке CSS, но я не совсем уверен, как исправить эту проблему. Я новичок в HTML и CSS, и я стараюсь учиться в обоих этих областях. Прошу прощения, если эта проблема кажется слишком тривиальной. Было бы очень признательно, если бы кто-то помог мне исправить ошибку, с которой я, похоже, сталкиваюсь.
наложите элемент на собственную стрелку вниз и затем запретите на нем события указателя.
хорошо работает в WebKit и Gecko.
HTML
<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<label />
<select name="sendingfrom" class="my-select">
<option value="africa">Africa</option>
<option value="USA">USA</option>
<option value="Australia">Fiat</option>
<option value="Fiji">Fiji</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->
CSS
select {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 150px;
outline: none;
color: blue;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: #fff;
}
/*target non IE 9 and IE 10 as pointer events are not supported*/
.notIE label:after {
content:'';
width: 23px;
height: 23px;
position: absolute;
display: inline-block;
top: 4px;
right: 4px;
background: url(http://www.jewellerynetasia.com/portals/0/Images/social-network-service/google-plus.png) no-repeat right center white;
pointer-events: none;
}
/*target IE 9 and IE 10:*/
@media screen and (min-width:0\0) {
.notIE label:after {
display:none;
}
}
border-radius поддерживается как на изображении.
border-radius
вообще не применяется ...
Вам нужно настроить таргетинг с помощью CSS.
Глядя на ваш CSS, вы не делаете этого для select
элементов.
Сначала (и так просто) примените класс к элементам (пример: class="my-select"
)
в контексте:
<select name="sendingfrom" class="my-select">
<option value="africa">Africa</option>
<option value="USA">USA</option>
<option value="Australia">Fiat</option>
<option value="Fiji">Fiji</option>
</select>
Затем настройте его с помощью CSS:
.my-select {
color: red;
font-size: 14px;
}
Стилизация элемента select
является сложной. Поведение, в зависимости от того, что именно вы хотели бы сделать, может отличаться от браузера к браузеру.
Одна вещь, которую я осознал на протяжении всего теста, - это то, что вам нужно установить свойство границы на select
(или дать ему класс или идентификатор и обратиться к нему), по крайней мере.
select {
color: red;
border: 1px solid #000;
}
Но он все равно не будет принимать все (в основном цвет, высота, ширина и цвет границы), и он не будет применяться к списку выборов или, по крайней мере, не в каждом браузере.
Я предлагаю вам взглянуть на статью " Разбивка по умолчанию", подробно обсуждая это.