Vu le code html suivantPouvez-vous le style d'une étiquette d'entrée de forme active avec seulement CSS
<label for="inputelement">label</label>
<input type="text" id="inputelement" name="inputelement" />
Vous pouvez définir le style de l'entrée sur le focus à l'aide
input:focus { background: green; }
est-il un moyen de coiffage aussi <label /> sans JavaScript?
Merci à tous
Non, il n'y a malheureusement pas de sélecteur de prédécesseur en css
input:focus -+ label { ... }
serait adorable.
ayant l'étiquette après l'entrée serait dooable:
input:focus + label { ... }
vous pouvez utiliser un certain positionnement à afficher avant ...
merci, je pensais que cela pourrait être le cas. serait vraiment sympa. Malheureusement, je ne peux pas changer le balisage: o (je vais garder cela à l'esprit pour le futur.) –
Cela peut être fait si vous ciblez les navigateurs qui supportent flexbox - voir la nouvelle réponse ci-dessous – yar1
Vous pouvez, aussi longtemps que le label suit le input dans la Majoration:
input:focus + label,
input:active + label {
/* style */
}
merci David, c'est bon à garder à l'esprit pour l'avenir, malheureusement, je ne peux pas changer le balisage dans cette instance. –
Vous pouvez utiliser un sélecteur d'attribut:
label[for=inputelement]:focus,
label[for=inputelement]:active {
/*styles here*/
}
Notez que ceci n'est pas supporté par IE6, mais devrait fonctionner dans tous les autres navigateurs, y compris IE7 et IE8.
Cela ne fonctionnera évidemment que pour cet ID spécifique. Si vous voulez que cela fonctionne pour tous les ID, il suffit de laisser le ID:
label[for]:focus,
label[for]:active {
/*styles here*/
}
Cela va maintenant travailler pour toutes les étiquettes avec un attribut for.
Si vous avez besoin de quelque chose entre les deux, vous devrez utiliser des classes.
Mais cela ne répondrait pas à la ' : focus', ou pseudo états ': active' –
Il ne peut malheureusement pas être prescrit, il doit aussi fonctionner pour n'importe quel identifiant/nom etc –
@David Thomas - assez bien, alors ajoutez: focus et: active à la selector .... Je vais l'éditer dans ma réponse .... – Spudley
Donnez votre bouton d'entrée une classe de style
style css:
INPUT.book:hover, INPUT.book:focus:hover {
background-image:url(book_over.png);
background-repeat:no-repeat;
height: 40px;
width: 140px;
font-family:calibri, Tahoma;
font-size:20px;
color:#ffffff;
text-align: center;
font-weight: bold;
}
INPUT.book {
background-image:url(book_active.png);
background-repeat:no-repeat;
height: 40px;
width: 140px;
font-family:calibri, Tahoma;
font-size:20px;
color:#ffffff;
text-align: center;
font-weight: bold;
}
et le code html d'entrée:
<input name="Bestil2" type="submit" class="book" value="Book møde" />
Je n'ai pas compris encore, comment éviter fond gris Même si j'ai un fichier png transparent, peut-être juste un jpg fera l'affaire. Mais j'espère que cela aide. Bonne chance :-)
L'ajout de ce pour les personnes à trouver cette page dans le futur . CSS4 aura un sélecteur parent vous permettant de choisir l'élément auquel appliquer le style:
Je pense que la spécification actuelle vous permet de spécifier quel élément correspond à un! signe - le sélecteur de sujet.
label! > input {
font-weight: bold;
}
Cela permet un contrôle beaucoup plus qu'un simple parent, par exemple dans cette chaîne effrayant sous la balise p est la cible!
article > h1 + section > p! > b > a {
font-style: italic;
}
Assurez-vous de vérifier le projet bien que cela pourrait changer: http://dev.w3.org/csswg/selectors4/#subject
^CECI. Pas de support à partir de 2013, mais finalement cela deviendra probablement la bonne façon de le faire. –
Eh bien le futur me dit merci. –
On dirait qu'il a disparu du brouillon. La solution selon le brouillon actuel utilisera: a sélecteur. Au lieu de "!> B> a", ce serait ": a (> b> a)" – JotaBe
Cela peut être fait si vous ciblez les navigateurs qui prennent en charge FlexBox - voir ceci: http://plnkr.co/edit/g376cf38iphfvGfSubOz?p=preview
Par souci de concision, le css il est minime, mais vous aurez besoin de préfixes spécifiques au navigateur pour étendre le support aux navigateurs plus anciens.
Je ne vois pas comment * flexbox * ferait la différence. Le code est correct, mais le style de focus fonctionne même sans '' 'display: flex'''. – Kamafeather
@Kamafeather: voici une explication plus longue: la solution utilise le sélecteur de frères et sœurs adjacents (+), ce qui signifie
Veuillez utiliser des extraits de code, le lien que vous avez inscrit est 404 – NetVicious
Vous pouvez donner un identifiant ou une classe à l'étiquette et la cibler dans votre CSS. Ou demandez-vous si vous pouvez le styler sans changer le balisage et en ajoutant un identifiant ou une classe? –
Cela peut être fait si vous ciblez les navigateurs qui supportent flexbox - voir la nouvelle réponse ci-dessous – yar1