удалить границу вокруг поля ввода в IE7 - PullRequest
Новая
       3

удалить границу вокруг поля ввода в IE7

1 голос
/ 11 ноября 2011

У меня есть следующий код: 

<div class="form_field">
<input type="text" />
</div>

стили 

.form_field { height:22px; border:1px solid #B7AB8C; background:#FFFFEA; padding:0 5px; line-height:22px; }
.form_field input[type="text"] { width:100%; border:none; border:0; border-color: transparent; margin:0; padding:0; height:22px; line-height:22px; }

В IE7 я не могу удалить границу вокруг поля ввода.

Что такоеидеи?

Лучшее решение для себя я определил как установивший класс для поля "input", как рекомендовано "tylerdurden".

И я добавлю следующие свойства для этого поля как "фон: прозрачный; вертикальное выравнивание: верх; ".

Но я не смог переопределить свойство line-height для поля" input ".Какие есть идеи?(:

Добавлено: я удалил свойство "высота" для контейнера .form_field - помог выровнять текст по вертикали.

Ответы [ 6 ]

4 голосов
/ 11 ноября 2011

Для IE7 вам нужно добавить имя класса к элементу ввода или выбрать его другим способом, так как IE <8 не поддерживает селекторы атрибутов.</p>

Но этот css должен работать с правильным селектором: 

.form_field input
{
  border:0
}

Но учтите, что использование border-color: transparent; с border: none; повлияет на блочную модель ввода, удалив размеры границ.Это изменит отношение ввода, как вертикальное расположение, с окружающими элементами.

3 голосов
/ 11 ноября 2011

Это связано с тем, что приведенный ниже код для ввода [type = "text"] неизвестен в IE7 или ниже. 

.form_field input[type="text"] { width:100%; border:none; border:0; border-color: transparent; margin:0; padding:0; height:22px; line-height:22px; }

Примечание. IE7 и IE8 поддерживают селекторы атрибутов, только если указан! DOCTYPE,Выбор атрибутов НЕ поддерживается в IE6 и ниже.

Возможно, вы захотите добавить это в начало вашего HTML. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
0 голосов
/ 25 июня 2014

Кажется, что IE7 не хочет значения "none", "0", кажется, работает.

0 голосов
/ 12 октября 2012

Попробуйте это 

<!--[if IE]>
<style type="text/css">
.form_field input{
  filter:chroma(color=#000000);
  border:none;
}
</style>
<![endif]-->
0 голосов
/ 11 ноября 2011

Дать класс текстовому полю; 

.form_field .textInput
{
    border:none;
}

Тогда в вашем html; 

<div class="form_field">
    <input type="text" class="textInput" />
</div>
0 голосов
/ 11 ноября 2011

Вам не нужны кавычки около "text" в селекторе CSS. Вместо всех этих border свойств, просто сделайте border: 0; самостоятельно (или если вы хотите быть тщательным border: 0px none transparent, но это излишне)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...