Округлые кнопки ввода, абсолютное позиционирование, ширина жидкости - PullRequest
Новая
       56

Округлые кнопки ввода, абсолютное позиционирование, ширина жидкости

2 голосов
/ 20 июля 2010

Я понимаю, что есть много вопросов с закругленными кнопками, но мои потребности довольно специфичны, и на это никто не ответил.

Вот мои требования:

  • Работает сабсолютно позиционированные кнопки
  • Методы только на стороне клиента (невозможно изменить HTML на стороне сервера)
  • Работает с типом ввода = кнопка и тип ввода = отправить (элемент кнопки не нужен)
  • Фиксированная высота, ширина жидкости
  • Поддерживает IE7 или лучше

Абсолютное позиционирование + сторона клиента делает, по моему мнению, неприемлемыми только самые закругленные углы.

Изображенияили никакие изображения не имеют значения (в любом случае это нормально).Разрешен JavaScript.

РЕДАКТИРОВАТЬ: Изменен вопрос, чтобы отразить актуальную проблему: один элемент HTML, который мне нужен, на самом деле не является требованием.

Ответы [ 3 ]

3 голосов
/ 20 июля 2010

Это невозможно для IE. Вот почему вы не можете найти его где-либо еще. Единственное, что вы можете сделать, это использовать статическое фоновое изображение, но оно будет растягиваться на разную ширину.

1 голос
/ 04 августа 2010

Я использовал несколько фонов для кнопок.

Несколько CSS3-фонов для браузеров, которые могут справиться с этим, и в IE я использовал фильтр DXTransform для добавления второго изображения (см. здесь ). В действительности использовалась довольно стандартная настройка стиля раздвижной двери, с некоторыми изменениями, объясняющими тот факт, что вы не можете расположить второе изображение в IE, кроме как в верхнем левом углу.

Для FF 3.5 и ниже я использовал border-radius, так как несколько фонов пришли только в 3.6.

Hover / активные изображения работали нормально, и все это в CSS, что было бонусом.

0 голосов
/ 20 июля 2010

Поскольку javascript разрешен (на основе одного из ваших комментариев), я не понимаю, как это могло бы повлиять на производительность:

  1. обернуть элементы input div
  2. взять свойства позиционирования input и скопировать их в div упаковщик
  3. удалить позиционирование с input, используя встроенный position: static
  4. добавьте другие элементы или стили, чтобы получить закругленные углы.Будучи фиксированной высотой, то для всего, кроме IE7, некоторые css, подобные этому, должны работать (предполагается фиксированная высота 20 пикселей, изображения с закругленными концами, ширина 10 пикселей и высота 20 пикселей):

Css: 

div.inputWrap:before, 
div.inputWrap:after {content: ' '; display: inline-block; height: 20px; width: 10px; background: url(/yourRoundedLeftEndImg.png) top left no-repeat;}

div.inputWrap:after {background: url(yourRoundedRightEndImg.png);}

Предполагая, что ваш javascript дает вам этот html: 

<div class="inputWrap"><input /></div>

Вам потребуется стилизовать ввод, чтобы избавиться от границ, и тому подобное (я также обнаружил, что мой тест в Firefox потребовал от меняустановите vertical-align: top, но не уверены, что это необходимо. Для IE6-7 вам действительно придется добавлять дополнительные div до и после input, так как они не распознают псевдоклассы :before и :after.

...