remplissage d'une entrée de texte dans IE ... possible?

J'ai une entrée de texte avec un buton de recherche positionné dessus ... pour faire de la place pour le bouton J'ai utilisé un peu de padding pour empêcher le texte de passer sous le bouton, ce qui est bien, ça marche dans firefox, mais pas IE .remplissage d'une entrée de texte dans IE ... possible?

En fait ... Il ne semble pas que le remplissage des entrées de texte fonctionne 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 je suis en train de faire possible ou devrais-je sucer juste et traiter le texte passe sous le bouton de recherche?

Je sais que je pourrais faire une boîte de recherche avec un arrière-plan transparent/frontière et dessiner le style en utilisant un div contenant ... mais ce n'est pas vraiment une option en raison du nombre d'endroits que j'ai pour le changer le site.

Peut-être que je vais créer une nouvelle classe pour cette entrée de texte qui la rend transparente et affecter le style de saisie de texte normal à la div contenant? Qu'est-ce que tu penses?

modifier: désolé, je aurait dû inclure le doctype ... la 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 vais avoir sont dans IE 7

Source

2009-03-03 Jiaaro

essayer d'utiliser la ligne de hauteur

Source

2009-12-15 23:12:34 chris

Je suis finalement tombé sur cette possibilité mais, votre réponse mérite à coup sûr un upvote :) – Jiaaro

Hmm .... cela semble marcher plutôt bien cross browser et c'est la meilleure solution que j'ai vu jusqu'ici. Cela rend cependant la taille du curseur différente dans Chrome et IE (légèrement décentré, ou plus grand) ce qui est légèrement gênant. –

Légèrement gênant == ne pas spec. Je pense que je vais utiliser le hack de Filip. –

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

Source

2009-03-03 16:56:17

Merci! C'est le bidouillage que je cherchais :) stupide IE – Jiaaro

désolé de le donner puis de l'emporter ... après l'avoir appliqué sur le site (pas mon fichier de test) il fait disparaître le bouton – Jiaaro

J'ai ce qui suit dans IE7. Quelle version ciblez-vous?

<style type="text/css"> 

    input#test { 
     padding: 10px; 
    } 

</style> 


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

Source

2009-03-03 16:57:55

Je ne veux vraiment que du rembourrage sur la droite pour que le texte ne passe pas sous le petit bouton de la loupe que j'ai positionné au dessus de la barre de recherche – Jiaaro

essayez cela pour any you ' On verra qu'aucun rembourrage n'est appliqué. –

je connu un problème similaire - IE a remplir le champ d'entrée, mais pas ce qui en fait plus, poussant ainsi le texte à l'intérieur de celui-ci. Je l'ai réparé en réglant la hauteur de l'entrée aussi. Essayez ça.

Source

2010-07-28 22:39:42

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

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

espoir que cela aide? Faites le moi savoir.

Source

2011-03-18 22:26:39

Merci pour ça. J'ai eu le même problème et cela a fonctionné pour moi. À votre santé. –

ouais débordement: visible a fait l'affaire pour moi aussi dans IE7 – nerdess

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

Source

2011-06-24 11:45:30 Olli

Si vous voulez une image d'arrière-plan pour montrer à travers la frontière, assurez-vous que le style de la bordure n'est pas "solide". –

A travaillé pour moi .. –

Faites votre entrée transparente et placer des 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; 
    }

Source

2012-04-06 13:22:21

Il y a une css seule solution pour elle

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

Source

2013-03-14 11:59:02 user2169658

Ceci est la seule réponse fournie par le code qui fonctionne dans l'ancien IE. – Raptor

Qu'en est-il déclarer DOCTYPE?

En ajoutant <!DOCTYPE html> rembourrage fonctionne grand pour moi dans IE8. Prenez le code suivant à titre d'exemple:

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

Source

2013-05-27 11:08:44

remplissage d'une entrée de texte dans IE ... possible?

Répondre

Questions connexes