100% ширина ввода с настройкой - PullRequest
Новая
       22

100% ширина ввода с настройкой

0 голосов
/ 18 августа 2011

Может у кого-нибудь есть решение (что-то вроде ссылки или рабочего примера) для ввода закругленных углов с шириной 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. Вы знаете -_- "

1 Ответ

1 голос
/ 18 августа 2011

Вы можете попробовать это jsfiddle (http://jsfiddle.net/aP2Ju/3/)

с пирогом css3 (http://www.css3pie.com)

И посмотреть, работает ли это для вас.

...