Est-il possible de trouver le style par défaut pour le champ de texte de saisie de l'éclat?

Vous savez que sexy lueur qui entoure un champ de saisie à chaque fois qu'il a le focus?

Sans entrer dans trop de détails, j'ai besoin de recréer cet effet à l'extérieur d'un champ de saisie, mais je n'arrive pas à trouver la feuille de style qui dicte un tel effet n'importe où.

(Je sais comment le faire, en utilisant le contour de la propriété et ainsi de suite. Je me demandais simplement si il y a un moyen que je peux trouver les valeurs EXACTES utilisées par défaut pour les champs de saisie de texte.)

  • Où avez-vous vu?
  • Désolé, que voulez-vous dire? Si vous parlez de l'éclat du texte, c'est cette lueur qui apparaît chaque fois que vous vous concentrez sur un champ de saisie... Comme, en ce moment, par exemple: lien
  • Comme l'a dit John, il n'y a pas de feuille de style. D'essai et d'erreur avec contour, les frontières et la couleur.
  • Désolé pour le retard, mais bon, les gars, vous aviez tort. Même si il n'y a pas de feuille de style, il y a certainement des règles css pour elle, et vous pouvez les obtenir en voyant @o.v. réponse
InformationsquelleAutor Adam Templeton | 2012-06-20
  1. 5

    chrome a le style de contour pour les entrées par défaut. j'ai désactiver la règle pour de nombreux projets.

    utiliser le chrome developer tool pour voir le navigateur de règles de style.

    voir comment faire ici:

    chrome developer outil info

    InformationsquelleAutor chrisvillanueva
  2. 3

    Il est possible de le faire via le CSS. Jetez un oeil à Twitter Bootstrap Formes et comment ils le font. Cliquez à l'intérieur de tous les champs de saisie.

    Voir un simple exemple ici: http://jsbin.com/esidas/2/edit#html,en direct

    C'est fait à l'aide de propriétés CSS3 pour box-shadow et transition

    input[type=text] {
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
input[type=text]:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
    InformationsquelleAutor Moin Zaman
  3. 2

    Le meilleur de la croix-navigateur/croix-plate-forme que je connaisse est formaliser.

    Si vous êtes à essayer de comprendre comment un rendu particulier fonctionne (c'est à dire sur Safari Mac), vous pourriez être à la recherche pour de l'agent utilisateur css. Sur les navigateurs modernes de rendu cycle de vie est entièrement paramétrée, dépendant du fournisseur de préfixes spécifiques et peuvent être rendus visibles avec les outils d'inspection, par exemple sur la Chrome ou FF+Firebug:

    Est-il possible de trouver le style par défaut pour le champ de texte de saisie de l'éclat?

    InformationsquelleAutor o.v.
  4. 0

    C'est votre navigateur le fait pour vous automatiquement. C'est pourquoi vous ne pouvez pas trouver une feuille de style pour elle.

    • La droite. Je suis conscient de cela. Je me demandais simplement si il y a un moyen d'obtenir les valeurs spécifiques qu'il utilise, afin que je puisse recréer ailleurs.
    • Vérifiez le répertoire où le fichier exécutable est trouvé. Si il y a une feuille de style par défaut il en sera probablement de se cacher quelque part.
    • Je vais fouiner là, alors. Laissez vous savez ce que je trouve.
    • Les navigateurs modernes s'appuient sur l'agent utilisateur css pour le rendu - "automatiquement" ne signifie pas "vous ne pouvez pas trouver une feuille de style pour elle"
    InformationsquelleAutor John Conde
  5. 0

    Parce que c'est un effet du navigateur et non pas d'un style, vous devez le faire manuellement. En disant cela, gardez à l'esprit que chaque navigateur est-il différemment (et je pense que ça dépend de l'OS client ainsi). Donc, vous allez vraiment être en mesure de correspondre si vous savez l'environnement du client à l'avance (ce qui est possible dans un réseau fermé).

    InformationsquelleAutor kad81
  6. 0

    Vous le savez, il est ajouté par le navigateur web et il dépend du navigateur et de l'OS que vous utilisez , à cet effet, nous ne pouvons pas vous montrer exactement codes. Comment trouver exactement le style peut ne pas être difficile, essayez le "inspecter l'élément" option sur un champ de saisie, il peut montrer le "calculée styles" par le navigateur. Sinon si vous pouvez dire au navigateur que vous utilisez le système d'exploitation que exactement , nous pouvons vous aider.

    InformationsquelleAutor Milindu Sanoj Kumarage