imbottitura di un input di testo in IE & # 8230; possibile?

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

Domanda

Ho un input di testo con un buton di ricerca posizionato sopra di esso ... per fare spazio al pulsante Ho usato un po 'di riempimento per evitare che il testo vada sotto il pulsante, il che va bene, funziona in Firefox, ma non IE.

In effetti ... Non sembra che il riempimento degli input di testo funzioni in IE.

Hanno il seguente codice 


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

È quello che sto cercando di fare o dovrei semplicemente succhiarlo e gestire il testo che passa sotto il pulsante di ricerca?

So che potrei creare una casella di ricerca con uno sfondo / bordo trasparenti e disegnare lo stile usando un div contenente ... ma questa non è davvero un'opzione a causa di quanti posti devo cambiarlo sul posto.

Forse creerò una nuova classe per questo input di testo che lo rende trasparente e assegnerò il normale stile di input di testo al div contenente? Cosa ne pensi?

modifica : scusate avrei dovuto includere il tipo di documento ... eccolo: 

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

Inoltre, i problemi che ho riscontrato sono in Internet Explorer 7

È stato utile?

Soluzione

prova a usare l'altezza della linea

Altri suggerimenti

Ho riscontrato questo problema e l'ho risolto aggiungendo la seguente riga 

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

spero che questo aiuti? Fammi sapere.

Prova border-right invece di padding-right . Questo ha funzionato per me.

Rendi trasparenti i tuoi input e posiziona gli stili all'interno di un div contenitore:

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

Esiste solo una correzione CSS per esso 

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

Grazie Muhammad Atif Chughtai

Dovrai usare float: left / right su '#mainPageSearch input' prima di poter applicare il riempimento / margine.

Ho riscontrato un problema simile: IE stava riempiendo il campo di input, ma non lo ingrandiva, spingendo così il testo al suo interno. L'ho risolto impostando anche l'altezza dell'ingresso. Prova quello.

Ho il seguente lavoro in IE7. Quale versione stai prendendo di mira? 

<style type="text/css">

    input#test {
        padding: 10px;
    }

</style>


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

Che ne dici di dichiarare DOCTYPE?

Aggiungendo <! DOCTYPE html > il padding funziona benissimo per me in IE8. Prendi il seguente codice come esempio: 

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myInput {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <input id="myInput" value="Some text here!" />
  </body>
</html>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top