Effet de contour sur le texte


329

Existe-t-il des moyens en CSS pour donner des contours à du texte de différentes couleurs? Je veux mettre en évidence certaines parties de mon texte pour le rendre plus intuitif - comme les noms, les liens, etc. Le changement des couleurs des liens, etc. est courant de nos jours, donc je veux quelque chose de nouveau.


17
@Dan Better implique différent. Vos conseils sont généralement bons, mais ils peuvent également étouffer l'expérimentation créative. De plus, ce n'est généralement pas «commun = bon»… plutôt, c'est «commun = à peine assez bon».
Konrad Rudolph

7
@Dan Grossman: le monde évolue à partir de nouvelles idées, tout n'est pas méprisable.
yoda

7
@yoda Votre syntaxe est inhabituelle. / EDIT, tant pis, vous a confondu avec quelqu'un d'autre… petit mec vert.
Konrad Rudolph

Pouvez-vous décrire ce dont vous avez besoin plus en détail. Je ne sais pas exactement ce que tu veux dire quand tu dis que tu veux «donner des contours à du texte avec des couleurs différentes»
Yi Jiang

1
doublon possible de la bordure de police CSS?
Adam Jensen

Réponses:


453

Il existe une propriété expérimentale de webkit appelée text-strokedans CSS3, j'essaie de faire fonctionner cela depuis un certain temps, mais je n'ai pas réussi jusqu'à présent.

Ce que j'ai fait à la place, c'est la text-shadowpropriété déjà prise en charge (prise en charge dans Chrome, Firefox, Opera et IE 9 je crois).

Utilisez quatre ombres pour simuler un texte tracé:

.strokeme {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
<div class="strokeme">
  This text should have a stroke in some browsers
</div>

J'ai fait une démo pour toi ici

Et un exemple survolé est disponible ici


Comme Jason C l'a mentionné dans les commentaires, la text-shadowpropriété CSS est désormais prise en charge par tous les principaux navigateurs, à l'exception d'Opera Mini. Où cette solution fonctionnera pour la compatibilité descendante (pas vraiment un problème concernant les navigateurs qui se mettent à jour automatiquement), je pense que le text-strokeCSS devrait être utilisé.


12
Malheureusement, IE ne prend pas en charge text-shadowjusqu'à IE10. Curieusement, IE9 prend en charge box-shadowmais pas text-shadow.
Web_Designer

14
Voici un résumé de la prise en chargetext-shadow du navigateur pour . Il semble qu'actuellement (3 ans après la publication de cette réponse), il est pris en charge par tous les principaux navigateurs, à l'exception d'Opera Mini, qui affiche un "support partiel" (il ignore blur-radius).
Jason C

3
Cela ajoute un effet plus fin:text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
BeauCielBleu

29
Nom de classe génial
citoyen conn

4
Jason C a souligné le text-shadowsoutien, non text-stroke. Ce qui n'est pris en charge que par webkit pour le moment.
Gregoire D.19

100

Edit: text-stroke est maintenant assez mature et implémenté dans la plupart des navigateurs . C'est plus facile, plus net et plus précis. Si le public de votre navigateur peut le prendre en charge, vous devez maintenant utiliser d' text-strokeabord, au lieu de text-shadow.


Vous pouvez et devez le faire avec juste l' text-shadoweffet sans aucun décalage:

.outline {
    color: #fff;
    text-shadow: #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}

Pourquoi? Lorsque vous décalez plusieurs effets d'ombre, vous commencerez à remarquer des coins irréguliers et irréguliers: Les décalages d'effet d'ombre entraînent des coins irréguliers notables.


avoir des effets d'ombre de texte dans une seule position élimine les décalages, ce qui signifie que si vous sentez que c'est trop mince et préférez un contour plus sombre à la place, pas de problème - vous peut répéter le même effet (en gardant la même position et le même flou), plusieurs fois. Ainsi:

text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;

Voici un échantillon d'un seul effet (en haut), et le même effet répété 14 fois (en bas):


Exemple de texte rendu avec text-shadow

Notez également: les lignes devenant si fines, c'est une très bonne idée de désactiver le rendu sous-pixel à l'aide de
-webkit-font-smoothing: antialiased.


Réponse intéressante, merci. Je ne comprends pas vraiment ce que vous voulez dire par «répétition» de l'effet.
edzillion

Merci pour l' font-smoothingoption, cela a grandement amélioré la sortie en chrome!
Meki

1
Je note le commentaire ajouté à la réponse selon lequel text-stroke est désormais pris en charge dans la plupart des navigateurs, mais caniuse est toujours (août 2016) le montrant comme non pris en charge dans toutes les versions d'IE et Edge, et nécessitant -webkit-text-stroke avec la mise en page Drapeau .css.prefixes.webkit activé dans Firefox. Il me semble que ce support n'est pas assez répandu pour les sites grand public.
Nick Rice

1
Je pense que répéter 14 fois une ombre de texte pourrait avoir un problème de performance. Surtout lors du défilement sur mobile.
kaosmos

2
AFAIK text-stroken'est pas le même que contour via text-shadow. text-stroken'a pas la possibilité de faire apparaître le contour en dehors du texte, ce qui signifie que le contour saigne dans le texte, ce qui le rend souvent très horrible. En d'autres termes, il text-strokene remplace pas les text-shadowcontours
gman

90

Facile! SVG à la rescousse.

Il s'agit d'une méthode simplifiée:

svg{
  font: bold 70px Century Gothic, Arial;
  width: 100%;
  height: 120px;
}

text{
  fill: none;
  stroke: black;
  stroke-width:0.5px;
  // stroke-dasharray: 2,2;
  stroke-linejoin: round;
  animation: 2s pulsate infinite;
}

@keyframes pulsate {
  50%{ stroke-width:4px; }
}
<svg viewBox="0 0 450 50">
  <text y="40">Scalable Title</text>
</svg>

Voici une démo plus complexe .


6
Il s'agit d'une excellente solution et n'a aucun des problèmes de performances associés à l'ombre de texte. La différence de performances entre cette approche et l'empilement de plusieurs ombres de texte est énorme pour mon application particulière (IE 10 sur les grands écrans).
djskinner

3
Cela m'a donné un bien meilleur effet que les ombres de texte, car j'avais besoin d'une ligne épaisse. Je vous remercie!
Andrea

2
C'est du pur or !! Approche très professionnelle et qualifiée, parfaite a répondu à la question! Cette solution est en avance sur W3 Council ou Google ou autre chose, félicitations!
Heitor

Cette solution aurait été parfaite pour moi aussi si je n'avais pas ajouté le trait à une zone de texte :(
Brandito

36

Vous pouvez essayer d'empiler plusieurs ombres floues jusqu'à ce que les ombres ressemblent à un trait, comme ceci:

.shadowOutline {
  text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}

Voici un violon: http://jsfiddle.net/GGUYY/

Je le mentionne juste au cas où quelqu'un serait intéressé, bien que je n'appellerais pas cela une solution car elle échoue de diverses manières:

  • cela ne fonctionne pas dans l'ancien IE
  • il rend tout à fait différemment dans chaque navigateur
  • appliquer autant d'ombres est très lourd à traiter: S

1
C'est une idée vraiment simple et brillante!

1
Merci, le problème est la performance, utilisez-la avec précaution :)
brohr

1
C'est fantastique. Les couches supplémentaires d'ombrage ajoutent vraiment de la profondeur, et cela fonctionne dans IE11, FF36 et Chrome 41.
RockiesMagicNumber

17

Je cherchais une solution de texte-cross-browser qui fonctionne lorsqu'il est superposé sur des images d'arrière-plan. pense que j'ai une solution pour cela qui n'implique pas de balisage supplémentaire, js et fonctionne dans IE7-9 (je n'ai pas testé 6), et ne cause pas de problèmes d'alias.

Il s'agit d'une combinaison de l'utilisation de CSS3 text-shadow, qui a un bon support sauf IE ( http://caniuse.com/#search=text-shadow ), puis de l'utilisation d'une combinaison de filtres pour IE. La prise en charge des traits de texte CSS3 est actuellement médiocre.

Filtres IE

Le filtre lumineux ( http://www.impressivewebs.com/css3-text-shadow-ie/ ) a l'air terrible, donc je ne l'ai pas utilisé.

La réponse de David Hewitt impliquait l'ajout de filtres à ombre portée dans une combinaison de directions. ClearType est ensuite supprimé malheureusement, nous nous retrouvons donc avec un texte mal aliasé.

J'ai ensuite combiné certains des éléments suggérés sur useragentman avec les filtres dropshadow.

Mettre ensemble

Cet exemple serait du texte noir avec un trait blanc. J'utilise des classes html conditionnelle par la façon de cibler IE ( http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ ).

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}

Cela fonctionne également dans les anciens IE:filter: glow(color=white,strength=1);
mch

16

Ajout juste de cette réponse. "Caresser" le texte n'est pas la même chose que "Décrire"

Les contours sont superbes. Caresser a l'air horrible.

La solution SVG répertoriée ailleurs a le même problème. Si vous voulez un plan, vous devez mettre le texte deux fois. Une fois caressé et encore pas caressé.

Caresser EST PAS Décrivant

body {
  font-family: sans-serif;
  margin: 20px;
}

.stroked {
  color: white;
  -webkit-text-stroke: 1px black;
}

.thickStroked {
  color: white;
  -webkit-text-stroke: 10px black;
}

.outlined {
  color: white;
  text-shadow:
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
}

.thickOutlined {
  color: white;
text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px -9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px #000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px 0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px 5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000, -9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px #000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px 0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px -9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, 9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px #000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px 0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px 8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000, -3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px #000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px 0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px -2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000, -4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000
}

svg {
  font-size: 40px;
  font-weight: bold;
  width: 450px;
  height: 70px;
  fill: white;
}

.svgStroke {
  fill: white;
  stroke: black;
  stroke-width: 20px;
  stroke-linejoin: round;
}
<h1 class="stroked">Properly stroked!</h1>
<h1 class="outlined">Properly outlined!</h1>

<h1 class="thickStroked">Thickly stroked!</h1>
<h1 class="thickOutlined">Thickly outlined!</h1>

<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Stroked!</text>
</svg>
<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Outlined!</text>
  <text class="svgText" x="10" y="45">SVG Thickly Outlined!</text>
</svg>

PS: j'aimerais savoir comment faire en sorte que le SVG soit de la bonne taille de tout texte arbitraire. J'ai le sentiment qu'il est assez compliqué de générer le svg, de l'interroger avec javascript pour obtenir les extensions puis d'appliquer les résultats. S'il y a une manière non js plus simple, j'aimerais savoir.


1
Excellent, c'est la bonne méthode, en décrivant, pas en caressant. Fonctionne magnifiquement et il est net et agréable pour les yeux.
MitchellK

7

J'ai obtenu de meilleurs résultats avec 6 ombres différentes:

.strokeThis{
    text-shadow:
    -1px -1px 0 #ff0,
    0px -1px 0 #ff0,
    1px -1px 0 #ff0,
    -1px 1px 0 #ff0,
    0px 1px 0 #ff0,
    1px 1px 0 #ff0;
}

Je voulais une ombre plus grande et j'ai dû ajouter quelques lignes supplémentaires .... 3px 0px 0 # 343a7e, -3px 0px 0 # 343a7e
Jayden Lawson

7

h1 {
   color: black;
   -webkit-text-fill-color: white; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}
<h1>Properly stroked!</h1>


6

Ce mixin pour SASS donnera des résultats fluides, en utilisant 8 axes:

@mixin stroke($size: 1px, $color: #000) {
  text-shadow:
    -#{$size} -#{$size} 0 $color,
     0        -#{$size} 0 $color,
     #{$size} -#{$size} 0 $color,
     #{$size}  0        0 $color,
     #{$size}  #{$size} 0 $color,
     0         #{$size} 0 $color,
    -#{$size}  #{$size} 0 $color,
    -#{$size}  0        0 $color;
}

Et CSS normal:

text-shadow:
  -1px -1px 0 #000,
   0   -1px 0 #000,
   1px -1px 0 #000,
   1px  0   0 #000,
   1px  1px 0 #000,
   0    1px 0 #000,
  -1px  1px 0 #000,
  -1px  0   0 #000;

4

Travailler avec des traits plus épais devient un peu compliqué, si vous avez le plaisir d'essayer ce mixin, pas parfait et en fonction du poids du trait, il génère une bonne quantité de css.

 @mixin stroke($width, $colour: #000000) {
      $shadow: 0 0 0 $colour; // doesn't do anything but I couldn't work out how to create a blank string and maintain commas
      @for $i from 0 through $width {
          $shadow: $shadow,
          -$i + px -$width + px 0 $colour,
          $i + px -$width + px 0 $colour,
          -$i + px $width + px 0 $colour,
          $i + px $width + px 0 $colour,
          -$width + px -$i + px 0 $colour,
          $width + px -$i + px 0 $colour,
          -$width + px $i + px 0 $colour,
          $width + px $i + px 0 $colour,
      }
      text-shadow: $shadow;
}

1
Ce mixin n'a pas fonctionné pour moi, mais celui-ci a fonctionné: gist.github.com/nathggns/2984123
akirk

0

Plusieurs ombres de texte ..
Quelque chose comme ça:

var steps = 10,
    i,
    R = 0.6,
    x,
    y,
    theStyle = '1vw 1vw 3vw #005dab';
for (i = -steps; i <= steps; i += 1) {
    x = (i / steps) / 2;
    y = Math.sqrt(Math.pow(R, 2) - Math.pow(x, 2));
    theStyle = theStyle + ',' + x.toString() + 'vw ' + y.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',' + x.toString() + 'vw -' + y.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',-' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
}
document.getElementsByTagName("H1")[0].setAttribute("style", "text-shadow:" + theStyle);

Démo: http://jsfiddle.net/punosound/gv6zs58m/


0

Générateur d'ombres de texte

Il y a beaucoup de bonnes réponses ici. Il semblerait que l'ombre du texte soit probablement le moyen le plus fiable de le faire. Je n'entrerai pas dans les détails sur la façon de faire cela avec text-shadow car d'autres l'ont déjà fait, mais l'idée de base est que vous créez plusieurs ombres de texte autour de l'élément de texte. Plus le contour du texte est grand, plus vous avez besoin d'ombres de texte.

Toutes les réponses soumises (au moment de cette publication) fournissent des solutions statiques pour l'ombre du texte. J'ai adopté une approche différente et j'ai écrit ce JSFiddle qui accepte les valeurs de couleur de contour, de flou et de largeur en entrée et génère la propriété d'ombre de texte appropriée pour votre élément. Remplissez simplement les blancs, vérifiez l'aperçu et cliquez pour copier le CSS et le coller dans votre feuille de style.


Annexe inutile

Apparemment, les réponses qui incluent un lien vers un JSFiddle ne peuvent être publiées que si elles contiennent également du code. Vous pouvez ignorer complètement cette annexe si vous le souhaitez. C'est le JavaScript de mon violon qui génère la propriété text-shadow. Veuillez noter que vous n'avez pas besoin d'implémenter ce code dans vos propres travaux:

function computeStyle() {
    var width = document.querySelector('#outline-width').value;
  width = (width === '') ? 0 : Number.parseFloat(width);
  var blur = document.querySelector('#outline-blur').value;
  blur = (blur === '') ? 0 : Number.parseFloat(blur);
  var color = document.querySelector('#outline-color').value;
  if (width < 1 || color === '') {
    document.querySelector('.css-property').innerText = '';
    return;
  }
    var style = 'text-shadow: ';
  var indent = false;
    for (var i = -1 * width; i <= width; ++i) {
    for (var j = -1 * width; j <= width; ++j) {
        if (! (i === 0 && j === 0 && blur === 0)) {
        var indentation = (indent) ? '\u00a0\u00a0\u00a0\u00a0' : '';
            style += indentation + i + "px " + j + "px " + blur + "px " + color + ',\n';
        indent = true;
      }
    }
  }
  style = style.substring(0, style.length - 2) + '\n;';
  document.querySelector('.css-property').innerText = style;

  var exampleBackground = document.querySelector('#example-bg');
  var exampleText = document.querySelector('#example-text');
  exampleBackground.style.backgroundColor = getOppositeColor(color);
  exampleText.style.color = getOppositeColor(color);
  var textShadow = style.replace(/text-shadow: /, '').replace(/\n/g, '').replace(/.$/, '').replace(/\u00a0\u00a0\u00a0\u00a0/g, '');
  exampleText.style.textShadow = textShadow;
}

-2

J'avais aussi ce problème, et ce text-shadown'était pas une option parce que les coins auraient l'air mauvais (à moins d'avoir beaucoup d'ombres), et je ne voulais pas de flou, donc ma seule autre option était de faire ce qui suit: Avoir 2 divs, et pour le div d'arrière-plan, mettez un -webkit-text-strokedessus, qui permet alors d'avoir un contour aussi grand que vous le souhaitez.

div {
  font-size: 200px;
  position: absolute;
  white-space: nowrap;
}

.front {
 color: blue;
}

.outline {
  -webkit-text-stroke: 30px red;
  user-select: none;
}
<div class="outline">
 outline text
</div>

<div class="front">
 outline text
</div>  

En utilisant cela, j'ai pu obtenir une ligne de sortie , car la stroke-widthméthode n'était pas une option si vous voulez que votre texte reste lisible avec un très grand contour (car avec stroke-widthle contour commence à l'intérieur du lettrage qui le rend non lisible lorsque la largeur devient plus grand que les lettres.

Remarque: la raison pour laquelle j'avais besoin d'un tel contour gras était que j'émulais les étiquettes de rue dans "google maps" et je voulais un gros halo blanc autour du texte. Cette solution a parfaitement fonctionné pour moi.

Voici un violon montrant cette solution

entrez la description de l'image ici


-15

Voici le fichier CSS, j'espère que vous obtiendrez ce que vous voulez

/* ----- Logo ----- */

#logo a {
    background-image:url('../images/wflogo.png'); 
    min-height:0;
    height:40px;
    }
* html #logo a {/* IE6 png Support */
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/wflogo.png", sizingMethod="crop");
}

/* ----- Backgrounds ----- */
html{
    background-image:none;  background-color:#336699;
}
#logo{
    background-image:none;  background-color:#6699cc;
}
#container, html.embed{
    background-color:#FFFFFF;
}
.safari .wufoo input.file{
    background:none;
    border:none;
}

.wufoo li.focused{
    background-color:#FFF7C0;
}
.wufoo .instruct{
    background-color:#F5F5F5;
}

/* ----- Borders ----- */
#container{
    border:0 solid #cccccc;
}
.wufoo .info, .wufoo .paging-context{
    border-bottom:1px dotted #CCCCCC;
}
.wufoo .section h3, .wufoo .captcha, #payment .paging-context{
    border-top:1px dotted #CCCCCC;
}
.wufoo input.text, .wufoo textarea.textarea{

}
.wufoo .instruct{
    border:1px solid #E6E6E6;
}
.fixed .info{
    border-bottom:none;
}
.wufoo li.section.scrollText{
    border-color:#dedede;
}

/* ----- Typography ----- */
.wufoo .info h2{
    font-size:160%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#000000;
}
.wufoo .info div{
    font-size:95%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}
.wufoo .section h3{
    font-size:110%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#000000;
}
.wufoo .section div{
    font-size:85%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}

.wufoo label.desc, .wufoo legend.desc{
    font-size:95%;
    font-family:inherit;
    font-style:normal;
    font-weight:bold;
    color:#444444;
}

.wufoo label.choice{
    font-size:100%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}
.wufoo input.text, .wufoo textarea.textarea, .wufoo input.file, .wufoo select.select{
    font-style:normal;
    font-weight:normal;
    color:#333333;
    font-size:100%;
}
{* Custom Fonts Break Dropdown Selection in IE *}
.wufoo input.text, .wufoo textarea.textarea, .wufoo input.file{ 
    font-family:inherit;
}


.wufoo li div, .wufoo li span, .wufoo li div label, .wufoo li span label{
    font-family:inherit;
    color:#444444;
}
.safari .wufoo input.file{ /* Webkit */
    font-size:100%;
    font-family:inherit;
    color:#444444;
}
.wufoo .instruct small{
    font-size:80%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}

.altInstruct small, li.leftHalf small, li.rightHalf small,
li.leftThird small, li.middleThird small, li.rightThird small,
.iphone small{
    color:#444444 !important;
}

/* ----- Button Styles ----- */

.wufoo input.btTxt{

}

/* ----- Highlight Styles ----- */

.wufoo li.focused label.desc, .wufoo li.focused legend.desc,
.wufoo li.focused div, .wufoo li.focused span, .wufoo li.focused div label, .wufoo li.focused span label,
.safari .wufoo li.focused input.file{ 
    color:#000000;
}

/* ----- Confirmation ----- */

.confirm h2{
    font-family:inherit;
    color:#444444;
}
a.powertiny b, a.powertiny em{
    color:#1a1a1a !important;
}
.embed a.powertiny b, .embed a.powertiny em{
    color:#1a1a1a !important;
}

/* ----- Pagination ----- */

.pgStyle1 var, .pgStyle2 var, .pgStyle2 em, .page1 .pgStyle2 var, .pgStyle1 b, .wufoo .buttons .marker{
    font-family:inherit;
    color:#444444;
}
.pgStyle1 var, .pgStyle2 td{
    border:1px solid #cccccc;
}
.pgStyle1 .done var{
    background:#cccccc;
}

.pgStyle1 .selected var, .pgStyle2 var, .pgStyle2 var em{
    background:#FFF7C0;
    color:#000000;
}
.pgStyle1 .selected var{
    border:1px solid #e6dead;
}


/* Likert Backgrounds */

.likert table{
    background-color:#FFFFFF;
}
.likert thead td, .likert thead th{
    background-color:#e6e6e6;
}
.likert tbody tr.alt td, .likert tbody tr.alt th{
    background-color:#f5f5f5;
}

/* Likert Borders */

.likert table, .likert th, .likert td{
    border-color:#dedede;
}
.likert td{
    border-left:1px solid #cccccc;
}

/* Likert Typography */

.likert caption, .likert thead td, .likert tbody th label{
    color:#444444;
    font-family:inherit;
}
.likert tbody td label{
    color:#575757;
    font-family:inherit;
}
.likert caption, .likert tbody th label{
    font-size:95%;
}

/* Likert Hover */

.likert tbody tr:hover td, .likert tbody tr:hover th, .likert tbody tr:hover label{
    background-color:#FFF7C0;
    color:#000000;
}
.likert tbody tr:hover td{
    border-left:1px solid #ccc69a;
}

/* ----- Running Total ----- */

.wufoo #lola{
    background:#e6e6e6;
}
.wufoo #lola tbody td{
    border-bottom:1px solid #cccccc;
}
.wufoo #lola{
    font-family:inherit;
    color:#444444;
}
.wufoo #lola tfoot th{
    color:#696969;
}

/* ----- Report Styles ----- */

.wufoo .wfo_graph h3{
    font-size:95%;
    font-family:inherit;
    color:#444444;
}
.wfo_txt, .wfo_graph h4{
    color:#444444;
}
.wufoo .footer h4{
    color:#000000;
}
.wufoo .footer span{
    color:#444444;
}

/* ----- Number Widget ----- */

.wfo_number{
    background-color:#f5f5f5;
    border-color:#dedede;
}
.wfo_number strong, .wfo_number em{
    color:#000000;
}

/* ----- Chart Widget Border and Background Colors ----- */

#widget, #widget body{
    background:#FFFFFF;
}
.fcNav a.show{
    background-color:#FFFFFF;
    border-color:#cccccc;
}
.fc table{
    border-left:1px solid #dedede;  
}
.fc thead th, .fc .more th{
    background-color:#dedede !important;
    border-right:1px solid #cccccc !important;
}
.fc tbody td, .fc tbody th, .fc tfoot th, .fc tfoot td{
    background-color:#FFFFFF;
    border-right:1px solid #cccccc;
    border-bottom:1px solid #dedede;
}
.fc tbody tr.alt td, .fc tbody tr.alt th, .fc tbody td.alt{
    background-color:#f5f5f5;
}

/* ----- Chart Widget Typography Colors ----- */

.fc caption, .fcNav, .fcNav a{
    color:#444444;
}
.fc tfoot, 
.fc thead th,
.fc tbody th div, 
.fc tbody td.count, .fc .cards tbody td a, .fc td.percent var,
.fc .timestamp span{
    color:#000000;
}
.fc .indent .count{
    color:#4b4b4b;
}
.fc .cards tbody td a span{
    color:#7d7d7d;
}

/* ----- Chart Widget Hover Colors ----- */

.fc tbody tr:hover td, .fc tbody tr:hover th,
.fc tfoot tr:hover td, .fc tfoot tr:hover th{
    background-color:#FFF7C0;
}
.fc tbody tr:hover th div, .fc tbody tr:hover td, .fc tbody tr:hover var,
.fc tfoot tr:hover th div, .fc tfoot tr:hover td, .fc tfoot tr:hover var{
    color:#000000;
}

/* ----- Payment Summary ----- */

.invoice thead th, 
.invoice tbody th, .invoice tbody td,
.invoice tfoot th,
.invoice .total,
.invoice tfoot .last th, .invoice tfoot .last td,
.invoice tfoot th, .invoice tfoot td{
    border-color:#dedede;
}
.invoice thead th, .wufoo .checkNotice{
    background:#f5f5f5;
}
.invoice th, .invoice td{
    color:#000000;
}
#ppSection, #ccSection{
    border-bottom:1px dotted #CCCCCC;
}
#shipSection, #invoiceSection{
    border-top:1px dotted #CCCCCC;
}

/* Drop Shadows */

/* - - - Local Fonts - - - */

/* - - - Responsive - - - */

@media only screen and (max-width: 480px) {
    html{
        background-color:#FFFFFF;
    }
    a.powertiny b, a.powertin em{
        color:#1a1a1a !important;
    }
}

/* - - - Custom Theme - - - */

9
Veuillez développer votre solution. Même si cela fonctionne, nous ne savons pas comment l'utiliser.
Patrick Hofman

3
J'espère que les bonnes solutions ne doivent pas prendre 200 lignes de css.
dardub

2
Cette réponse n'a littéralement aucun sens.
superluminaire
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.