web-dev-qa-db-fra.com

remplir une entrée de texte dans IE ... possible?

J'ai une entrée de texte avec une recherche absolue sur le bouton de recherche positionné dessus ... pour faire de la place pour le bouton J'ai utilisé un rembourrage pour empêcher le texte de passer sous le bouton, ce qui est bien, cela fonctionne dans Firefox, mais pas dans IE.

En fait ... Il ne semble pas que le remplissage sur les entrées de texte fonctionne du tout dans IE.

Ils ont le code suivant


<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>

Est-ce que ce que j'essaie de faire est possible ou devrais-je simplement le laisser tomber et traiter le texte placé sous le bouton de recherche?

Je sais que je pourrais créer un champ de recherche avec un fond/une bordure transparent et dessiner le style à l'aide d'un div contenant ... mais ce n'est pas vraiment une option à cause du nombre de lieux où j'ai dû le modifier sur le site. 

Peut-être que je créerai une nouvelle classe pour cette entrée de texte qui la rende transparente et affectera le style de saisie de texte normal à la div qui la contient? Qu'est-ce que tu penses?

edit : désolé j'aurais dû inclure le doctype ... le voici:

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

de plus, les problèmes que je rencontre sont dans IE 7

htmlinternet-explorerpaddingtextinput
22
Jiaaro

essayez d'utiliser line-height

64
chris

J'ai eu ce problème aussi je l'ai résolu en ajoutant la ligne suivante

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

j'espère que cela t'aides? Faites le moi savoir.

10
Armen Kesablyan

Il n'y a qu'un correctif CSS pour cela

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;
}

Merci Muhammad Atif Chughtai

4
user2169658

Rendez votre entrée transparente et placez les styles dans un conteneur 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
David D

Essayez border-right au lieu de padding-right. Cela a fonctionné pour moi.

4
Olli

Vous devrez utiliser float: left/right sur '#mainPageSearch input' avant de pouvoir appliquer le padding/margin.

3
Filip Dupanović

J'ai rencontré un problème similaire: IE remplissait le champ de saisie, mais ne le rendait pas plus gros, ce qui poussait le texte à l'intérieur. Je l'ai corrigé en réglant également la hauteur de l'entrée. Essayez ça.

1
Shane N

Qu'en est-il de déclarer DOCTYPE?

En ajoutant <!DOCTYPE html>, le rembourrage me convient parfaitement dans IE8. Prenez le code suivant comme exemple:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myInput {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <input id="myInput" value="Some text here!" />
  </body>
</html>
0
German Latorre

J'ai le travail suivant dans IE7. Quelle version ciblez-vous?

<style type="text/css">

    input#test {
        padding: 10px;
    }

</style>


<input type="text" id="test" />
0
Nick Allen