Может у кого-нибудь есть решение (что-то вроде ссылки или рабочего примера) для ввода закругленных углов с шириной 100% и настраиваемой правой границей.
Теперь у меня есть такая структура:
<span class="rounded left-corner">
<span class="rounded right-corner">
<span class="rounded bg ">
<input id="expoName" name="expoName" type="text" />
</span>
</span>
</span>
и это стили:
.rounded.left-corner {
background: url('/resources/images/base/input-left-border.png') no-repeat;
height: 31px;
display: inline-block;
margin: 15px 0px;
}
.rounded.bg {
background: url('/resources/images/base/input-bg.png') repeat-x;
height: 31px;
display: inline-block;
margin: 0 19px;
}
.rounded.right-corner {
background: right url('/resources/images/base/input-right-border.png') no-repeat;
height: 31px;
display: inline-block;
}
.rounded input[type="text"] {
height: 30px;
outline: none;
border: 0px;
background-color: transparent;
font-size: 18px;
display: block;
}
Где input-right-border.png и input-left-border.png - это 19 * 31 изображение для границ, а input-bg.png - это 19 * 1 изображение. Изображения газовые, круглые углы и тени.
Поэтому, если я хочу настроить правую границу для указателя даты, например, я делаю:
.rounded.startDate .right-corner {
background: right url('/resources/images/base/input-startdate-right-border.png') no-repeat;
}
.rounded.startDate .bg {
margin-right: 33px;
}
И если я установлю ширину #expoName с абсолютным значением, то все в порядке. Но теперь я хочу 100% ширины поля ввода. Поэтому я пытаюсь найти другое решение для этого, но пока не получилось. Итак, какие-либо решения или советы?
Здесь, на stackoverflow, я нашел это: http://jsfiddle.net/aP2Ju/3/ Но это не совсем то, что я хочу. Из-за IE. Вы знаете -_- "