Закругленные углы дляиспользуя border-radius.htc для IE - PullRequest
Новая
       19

Закругленные углы дляиспользуя border-radius.htc для IE

27 голосов
/ 18 июля 2010

Я хочу создать поля ввода с закругленными углами.

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 не показывает никаких границ для полей ввода - соседние округленные или простые границы.Когда я удаляю CSS-стиль для #RightColumn, IE показывает поля ввода с закругленными углами.Но мне нужен фон для # RightColumn.

Как я могу его создать?

Ответы [ 6 ]

38 голосов
/ 18 июля 2010

О, господин, не делай так.Файлы HTC никогда не были хорошей идеей по соображениям производительности и ясности, и вы используете слишком много специфичных для поставщика параметров для чего-то, что можно легко сделать кросс-браузерным вплоть до IE6.

Примените фоновое изображение к полю ввода с закругленными углами и сделайте фоновый цвет поля прозрачным с полями: ни один из них не применяется.

16 голосов
/ 21 июля 2011 
    border-bottom-color: #b3b3b3;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: #b3b3b3;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: #b3b3b3;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: #b3b3b3;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: solid;
    border-top-width: 1px;

... Кому интересно, IE6, мы находимся в обновлении 2011 года и просыпайтесь, пожалуйста!

4 голосов
/ 09 октября 2014

если вы используете для определенного текстового поля, используйте класс

<style>
  .inputForm{
      border-radius:5px;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
   }
</style>

и в html-коде используйте 

 <input type="text" class="inputForm">

или если вы хотите сделать это для всех типов ввода, текстовое поле означает использование

<style>
    input[type="text"]{
      border-radius:5px;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
    }
 </style>

и в html-коде 

<input type="text" name="name">
3 голосов
/ 18 июля 2010

Это не будет работать в IE <9, однако, вы можете настроить поддержку IE, используя: </p>

CSS3Pie

Пирог делает Internet Explorer 6-8 способный сделать несколько из Наиболее полезные функции оформления CSS3.

2 голосов
/ 20 января 2014

Документ W3C говорит о свойстве "border-radius" : "поддерживается в IE9 +, Firefox, Chrome, Safari и Opera".

Следовательно, я предполагаю, что вы тестируете на IE8или ниже.

Для «обычных элементов» есть решение, совместимое с IE8 и другими старыми / плохими браузерами.См. Ниже.

HTML: 

<div class="myWickedClass">
  <span class="myCoolItem">Some text</span> <span class="myCoolItem">Some text</span> <span class="myCoolItem"> Some text</span> <span class="myCoolItem">Some text</span>
</div>

CSS: 

.myWickedClass{
  padding: 0 5px 0 0;
  background: #F7D358 url(../img/roundedCorner_right.png) top right no-repeat scroll;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font: normal 11px Verdana, Helvetica, sans-serif;
  color: #A4A4A4;
}
.myWickedClass > .myCoolItem:first-child {
  padding-left: 6px;
  background: #F7D358 url(../img/roundedCorner_left.png) 0px 0px no-repeat scroll;
}
.myWickedClass > .myCoolItem {
  padding-right: 5px;
}

Вам необходимо создать оба roundedCorner_right.png & roundedCorner_left.png .Это обходной путь для IE8 (и ниже), чтобы имитировать функцию закругленного угла.

Так что в этом примере выше мы применяем левый закругленный угол к первому элементу span в содержащем элементе div, и мы применяем правый закругленный уголугол вмещающий div.Эти изображения перекрывают «скучные углы», предоставляемые браузером, и создают иллюзию того, что они являются частью закругленного элемента.

Идея для входных данных заключается в том, чтобы сделать ту же логику.Однако input является пустым элементом, «element пуст, он содержит только атрибуты», другими словами, вы не можете обернуть диапазон во входные данные , такие как <input><span class="myCoolItem"></span></input>, чтобы затем использовать фоновые изображения, как впредыдущий пример.

Следовательно, кажется, что решение состоит в том, чтобы сделать наоборот: заключить вход в другой элемент.см. этот ответ закругленные углы входных элементов в IE

1 голос
/ 18 июля 2010

Запись с телефона, но curvycorners действительно хороши, поскольку она добавляет свои собственные границы, только если браузер не поддерживает ее по умолчанию. Другими словами, браузеры, которые уже поддерживают некоторые CSS3, будут использовать свою собственную систему для обеспечения углов.
https://code.google.com/p/curvycorners/

...