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

StackOverflow https://stackoverflow.com/questions/607198

Question

J'ai une saisie de texte avec un bouton de recherche absolu positionné dessus ... pour faire de la place pour le bouton J'ai utilisé un remplissage pour empêcher le texte de passer sous le bouton, ce qui est bien, cela fonctionne dans Firefox, mais pas 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 sucer et traiter du 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 conteneur ... mais ce n'est pas vraiment une option à cause du nombre d'endroits où j'ai dû le changer le site.

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

modifier : 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">

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

Était-ce utile?

La solution

essayez d'utiliser line-height

Autres conseils

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

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

espérons que cela aide? Faites le moi savoir.

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

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

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

Vous devrez utiliser float: left / right sur '#mainPageSearch input' avant de pouvoir appliquer un remplissage / une marge.

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.

Je travaille dans IE7. Quelle version ciblez-vous? 

<style type="text/css">

    input#test {
        padding: 10px;
    }

</style>


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

Qu'en est-il de la déclaration de DOCTYPE?

En ajoutant <! DOCTYPE html > , le remplissage fonctionne parfaitement pour moi 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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top