Стилизация кнопки ввода с помощью «Раздвижные двери»

Question

У меня есть веб-страница, использующая сторонний HTML, который я не могу изменить. Однако я могу редактировать таблицу стилей CSS. У меня есть кнопка стиля «раздвижные двери», которую я хочу заменить на кнопку ввода по умолчанию на странице, но не могу понять, как это сделать, используя только CSS.

Вот HTML-код кнопки:

<div>
    <input type="button" style="margin: 10px 0pt 0pt; width: 60px; height: 25px; font-size: 11px;" name="search_btn" value="Search" onclick="DoSearchSalesExpanded(searchform);"/>
</div>

А вот CSS существующей у меня кнопки, которая использует метод «раздвижных дверей»:

.clear { 
    /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}
a.button_oval {
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_a.gif') no-repeat scroll top right;
    color: #222;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}
a.button_oval span {
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
} 
a.button_oval:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}
a.button_oval:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
} 

Answer 1

Если вы можете использовать элемент button вместо элемента input . Следующие статьи весьма полезны.

• http://jedisthlm.com/2008/03/27/flexible-css-buttons/
• http://robertnyman.com/2008/03/13/styling-buttons-and-achieving-sliding-doors-with-them/

Вы все еще можете использовать тип submit и post, как для ввода

Однако, если вы полагаетесь на использование этой кнопки в качестве отправки, просто помните об этом при использовании IE. он также отправит содержимое кнопки, что даст исключение безопасности для веб-приложений .net.

* Редактировать, найти другую ссылку, так как оригинал больше не работает

Answer 2

Для объединения вложенных фонов (два типа раздвижных дверей) необходимы два элемента: внешний (фоновый) и внутренний (передний план, содержащий конечную часть фонового изображения). Если у вас есть только автономный , вы застряли.

Если вы можете найти способ выбрать

, который вы упомянули, вы можете использовать его в качестве внешнего элемента с кнопкой (с удаленным естественным цветом фона) в качестве внутреннего. Вы должны были бы убедиться, что внешний div был той же ширины / высоты, что и внутренний , хотя, возможно, перемещая его влево (чтобы активировать поведение «сжимать, чтобы соответствовать», которое поставляется с плавающими). Вам также нужно будет учесть верхнее поле на кнопке и любые отступы на ней.

#something div {
    float: left;
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_a.gif') no-repeat 0 10px;
}
#something div input {
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_span.gif') no-repeat;
    border: none;
    padding: 0;
}

Однако, поскольку рассматриваемая кнопка имеет фиксированный размер пикселя на странице, вам вообще не нужно использовать вложенные фоны. Вы можете просто сделать один фон нужного размера для кнопки.

Answer 3

Ваш единственный вариант - использовать JavaScript для динамической вставки тегов ... my button text ..., обычно используемых для кнопок раздвижных дверей. Однако это не рекомендуется, так как не будет работать с отключенным JS.