Скругленные углы для <входной тип ='text'/> использующий границу-radius.htc для IE
Я хочу создать поля ввода со скругленными углами.
HTML:
<div id="RightColumn">
<input type="text" class="inputForm" />
</div>
CSS:
.inputForm
{
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
-khtml-border-radius: 10px; /* KHTML */
border-radius: 10px; /* CSS3 */
behavior:url("border-radius.htc");
}
#RightColumn
{
background-color:White;
}
Но IE не показывает границ для полей ввода - neighter округленные ни простые границы. Когда я удаляю стиль CSS для #RightColumn, IE показывает поля ввода со скругленными углами. Но мне нужен фон для #RightColumn.
Как я могу создать его?
3 ответа
О, господин, не делай этого так. Файлы HTC никогда не являются хорошей идеей по соображениям производительности и ясности, и вы используете слишком много параметров, зависящих от производителя, для чего-то, что можно легко сделать кроссбраузерным вплоть до IE6.
Примените фоновое изображение к полю ввода с закругленными углами и сделайте цвет фона поля прозрачным с рамкой: вместо этого не применяется.
Запись с телефона, но curvycorners действительно хороша, так как добавляет свои собственные границы только в том случае, если браузер не поддерживает это по умолчанию. Другими словами, браузеры, которые уже поддерживают некоторый CSS3, будут использовать свою собственную систему для предоставления углов.
https://code.google.com/p/curvycorners/
Это не будет работать в IE <9, однако вы можете заставить IE поддерживать это, используя:
PIE делает Internet Explorer 6-8 способен отображать некоторые из наиболее полезные функции оформления CSS3.