Укладка кнопки ввода с помощью «Скользящих дверей»

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

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

Если вы можете найти способ выбрать < div>, о котором вы упомянули, вы можете использовать его как внешний элемент с кнопкой (с естественным фоном цвета), как внутренний. Вы должны были бы убедиться, что внешний 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 2

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

Answer 3

Если вы в состоянии использовать кнопку , а не вход элемент. Следующие статьи весьма полезны.

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

Вы можете использовать тип представлять и пост как вход делает

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

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