заполнение ввода текста в IE ... возможно? - PullRequest
Новая
       22

заполнение ввода текста в IE ... возможно?

22 голосов
/ 03 марта 2009

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

На самом деле ... Похоже, что заполнение текстового ввода вообще не работает в IE.

У них есть следующий код 


<style type="text/css">
#mainPageSearch input {
    width: 162px;
    padding: 2px 20px 2px 2px;
    margin: 0;
    font-size: 12px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background:#F3F3F3 url(form-shadow.png) repeat-x scroll left top;
    border-color:#C6C6C6 #C6C6C6 #E3E3E3;
    border-style:solid;
    border-width:1px;
    color:#666666;
}
#mainPageSearch {
    margin-bottom: 10px;
    position: relative; /* Lets me absolute position the button */
}
#mainPageSearchButton {
    display: block;
    position: absolute;
    top:0px;
    right: -2px;
    text-indent: -2000em;
    height: 22px;
    width: 22px;
    background: transparent url('images/searchBtn.png') top center no-repeat;
}
</style>


<form id="mainPageSearch" action="">
    <input type="text"/>
    <a id="mainPageSearchButton" href="#">Search</a>
</form>

Возможно ли то, что я пытаюсь сделать, или я должен просто смириться с этим и разобраться с текстом, идущим под кнопкой поиска?

Я знаю, что мог бы сделать окно поиска с прозрачным фоном / рамкой и нарисовать стиль, используя содержащий div ... но это не совсем вариант из-за того, сколько мест мне нужно изменить на сайт.

Может быть, я сделаю новый класс для этого ввода текста, который сделает его прозрачным, и назначу обычный стиль ввода текста содержащему div? Что ты думаешь?

edit : извините, я должен был включить тип документа ... вот он: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

также, у меня проблемы в IE 7

Ответы [ 9 ]

64 голосов
/ 16 декабря 2009

попробуйте использовать высоту строки

10 голосов
/ 19 марта 2011

У меня была эта проблема, и я решил ее, добавив следующую строку 

input 
{
    overflow:visible;
    padding:5px;
}

надеюсь, это поможет? Дайте мне знать.

4 голосов
/ 14 марта 2013

Существует только исправление css 

div.search input[type="text"] {
    width: 110px;
    margin: 0;
    background-position: 0px -7px;
    text-indent:0;
    padding:0 15px 0 15px;
}
/*ie9*/ div.search input[type="text"] {
    border-left: 25px solid transparent;
}
/*ie8*/ div.search input[type="text"] {
    border-left: 25px solid transparent;
    background-position-x: -16px;
    padding-left: 0px;
    line-height: 2.5em;
}

Спасибо Мухаммед Атиф Чухтай

4 голосов
/ 06 апреля 2012

Сделайте ваш ввод прозрачным и поместите стили внутри контейнера div:

http://jsfiddle.net/LRWWH/211/

HTML 

 <div class="input-container">
 <input type="text" class="input-transparent" name="fullname"> 
 </div>

CSS 

 .input-container {
    background:red;
    overflow:hidden;
    height: 26px;
    margin-top:3px;        
    padding:6px 10px 0px;
    width: 200px;
  }

 .input-transparent {
    background-color:transparent;
    border:none;
    overflow:hidden;        
    color:#FFFFF;
    width: 200px;
    outline:none;
  }
4 голосов
/ 24 июня 2011

Попробуйте border-right вместо padding-right. Это сработало для меня.

3 голосов
/ 03 марта 2009

Вам нужно будет использовать float: left / right для '#mainPageSearch input', прежде чем вы сможете применить padding / margin.

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

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

0 голосов
/ 27 мая 2013

А как насчет объявления DOCTYPE?

Добавление <!DOCTYPE html> отлично работает для меня в IE8. Возьмите следующий код в качестве примера: 

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myInput {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <input id="myInput" value="Some text here!" />
  </body>
</html>
0 голосов
/ 03 марта 2009

У меня есть следующая работа в IE7. На какую версию вы ориентируетесь? 

<style type="text/css">

    input#test {
        padding: 10px;
    }

</style>


<input type="text" id="test" />
...