Эффект контура к тексту

329

Есть ли в CSS способы придать контурам текст с разными цветами? Я хочу выделить некоторые части моего текста, чтобы сделать его более интуитивно понятным - например, имена, ссылки и т. Д. Изменение цветов ссылок и т. Д. В настоящее время является обычным явлением, поэтому я хочу что-то новое.

макинтош
источник
17
@ Дэн Лучше подразумевает другое. Ваш совет, как правило, хорош, но он также может подавить творческие эксперименты. Кроме того, это обычно не «обычный = хороший»… скорее, это «обычный = едва достаточно хороший».
Конрад Рудольф
7
@Dan Grossman: мир развивается из новых идей, не все новое презренно.
Йода
7
@yoda Ваш синтаксис необычный. / EDIT не обращайте внимания, запутал вас с кем-то еще ... маленький зеленый чувак.
Конрад Рудольф
Можете ли вы описать, что вам нужно более подробно. Я не совсем уверен, что вы имеете в виду, когда говорите, что хотите «дать контуры тексту с разными цветами»
И Цзян
1
возможный дубликат CSS Font Border?
Адам Дженсен

Ответы:

453

В text-strokeCSS3 есть экспериментальное свойство webkit , я пытался заставить его работать какое-то время, но пока безуспешно.

Вместо этого я использовал уже поддерживаемое text-shadowсвойство (поддерживается в Chrome, Firefox, Opera и IE 9, я считаю).

Используйте четыре тени для имитации штрихованного текста:

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

Я сделал демо для вас здесь

И пример можно найти здесь


Как упоминал Джейсон С в комментариях, text-shadowсвойство CSS теперь поддерживается всеми основными браузерами, за исключением Opera Mini. Где это решение будет работать для обратной совместимости (на самом деле проблема не касается браузеров, которые автоматически обновляются), я считаю, что text-strokeCSS следует использовать.

рукав моря
источник
12
К сожалению, IE не поддерживает text-shadowдо IE10. Как ни странно, IE9 поддерживает, box-shadowно нет text-shadow.
Web_Designer
14
Вот краткое описание поддержки браузера дляtext-shadow . Похоже, что в настоящее время (через 3 года после публикации этого ответа) он поддерживается всеми основными браузерами, за исключением Opera Mini, которая показывает «частичную поддержку» (игнорируется blur-radius).
Джейсон С
3
Это добавляет более тонкий эффект:text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
BeauCielBleu
29
Удивительное имя класса
гражданин Конн
4
Джейсон С указал на text-shadowподдержку, а не text-stroke. Который в настоящее время поддерживается только webkit.
Грегуар Д.
100

Редактировать: text-stroke теперь достаточно зрелый и реализован в большинстве браузеров . Это проще, острее и точнее. Если ваша браузерная аудитория может это поддержать, вы должны text-strokeсначала использовать вместо text-shadow.


Вы можете и должны делать это только с text-shadowэффектом без каких-либо смещений:

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

Зачем? Когда вы смещаете несколько теневых эффектов, вы начинаете замечать неровные, неровные углы: Смещение эффекта тени приводит к заметным неровным углам.


наличие текстовых теневых эффектов всего в одной позиции устраняет смещения, а это означает, что если вы чувствуете, что это слишком тонкий и предпочитаете более темный контур, то нет проблем - вы может повторять один и тот же эффект (сохраняя ту же позицию и размытие), несколько раз. Вот так:

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;

Вот пример только одного эффекта (вверху) и того же эффекта, повторенного 14 раз (внизу):


Пример текста отображается с текстовой тенью

Также обратите внимание: поскольку линии становятся такими тонкими, очень полезно отключить субпиксельный рендеринг
-webkit-font-smoothing: antialiased.

наследственный
источник
Интересный ответ, спасибо. Я не совсем понимаю, что вы имеете в виду, когда повторяете эффект.
edzillion
Спасибо за font-smoothingопцию, это значительно улучшило вывод в chrome!
Меки
1
Я отмечаю добавленный к ответу комментарий о том, что текстовая штриховка теперь поддерживается в большинстве браузеров, но caniuse по-прежнему (август 2016 г.) показывает, что он не поддерживается во всех версиях IE и Edge, и нуждается в -webkit-text-stroke с макетом Флаг .css.prefixes.webkit включен в Firefox. Метинки, которые недостаточно широко распространены для поддержки общедоступных сайтов.
Ник Райс
1
Я думаю, что повторение 14 раз текстовой тени может иметь проблемы с производительностью. Особенно при прокрутке на мобильном телефоне.
Каосмос
2
AFAIK text-stroke- это не то же самое, что наброски через text-shadow. text-strokeне имеет возможности сделать контур за пределами текста, что означает, что контур сливается с текстом, что часто выглядит действительно ужасно. Другими словами, text-strokeэто не замена text-shadowконтуров
gman
90

Легко! SVG на помощь.

Это упрощенный метод:

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>

Вот более сложная демонстрация .

VSync
источник
6
Это отличное решение, в котором нет проблем с производительностью, связанных с текстовой тенью. Разница в производительности между этим подходом и наложением нескольких текстовых теней огромна для моего конкретного приложения (IE 10 на больших экранах).
djskinner
3
Это дало мне гораздо лучший эффект, чем тени текста, потому что мне нужна была толстая линия. Спасибо!
Андреа
2
Это чистый золотой чувак !! Очень профессиональный и квалифицированный подход, отлично ответили на вопрос! Это решение впереди W3 Council или Google или что-то еще, поздравляю!
Heitor
Это решение было бы идеально для меня тоже, если бы мне не пришлось добавлять штрих к текстовой области :(
Brandito
36

Вы можете попробовать сложить несколько размытых теней, пока тени не станут похожими на штрихи, например:

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

Вот скрипка: http://jsfiddle.net/GGUYY/

Я упоминаю об этом на всякий случай, если кто-то заинтересован, хотя я бы не назвал это решением, потому что оно терпит неудачу различными способами:

  • это не работает в старом IE
  • он отображается совершенно по-разному в каждом браузере
  • нанесение такого количества теней очень тяжело для обработки: S
brohr
источник
1
Это действительно простая и блестящая идея!
1
Спасибо, проблема с этим, хотя производительность, используйте с осторожностью :)
brohr
1
Это фантастика. Дополнительные слои затенения действительно добавляют ему глубины, и это работает в IE11, FF36 и Chrome 41.
RockiesMagicNumber
17

Я искал кросс-браузерное решение для обработки текста, которое работает, когда накладывается на фоновые изображения. Думаю, у меня есть решение для этого, которое не требует дополнительной разметки, js и работает в IE7-9 (я не тестировал 6), и не вызывает проблем с наложением.

Это комбинация использования CSS3 text-shadow, которая имеет хорошую поддержку, кроме IE ( http://caniuse.com/#search=text-shadow ), с последующим использованием комбинации фильтров для IE. Поддержка текстовых штрихов CSS3 на данный момент слаба.

IE Фильтры

Светящийся фильтр ( http://www.impressivewebs.com/css3-text-shadow-ie/ ) выглядит ужасно, поэтому я этим не пользовался.

Ответ Дэвида Хьюитта заключался в добавлении фильтров в виде теней в комбинации направлений. К сожалению, ClearType удаляется, поэтому мы получаем плохо псевдоним.

Затем я объединил некоторые элементы, предложенные на useragentman, с фильтрами drophadow.

Положить его вместе

Этот пример будет черным текстом с белым штрихом. Я использую условные html-классы для целевой 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;
}
crdunst
источник
Это также работает в старых IE:filter: glow(color=white,strength=1);
mch
16

Просто добавив этот ответ. «Поглаживание» текста - это не то же самое, что «Изложение»

Изложение выглядит великолепно. Поглаживание выглядит ужасно.

Решение SVG, указанное в другом месте, имеет ту же проблему. Из вас хотят наброски вам нужно поместить текст дважды. Один раз погладил и снова не погладил.

Поглаживание не очерчивает

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: я хотел бы знать, как сделать SVG правильным размером для любого произвольного текста. У меня есть ощущение, что это довольно сложно, включая генерацию SVG, запрос его с помощью JavaScript, чтобы получить экстенты, а затем применить результаты. Если есть более простой способ не-JS, я бы хотел знать.

GMan
источник
1
Отлично, это правильный метод, обводка, а не поглаживание. Работает красиво и аккуратно и просто на глазах.
MitchellK
7

Я получил лучшие результаты с 6 различными тенями:

.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;
}
surajck
источник
Я хотел большую тень, и мне пришлось добавить пару лишних линий .... 3px 0px 0 # 343a7e, -3px 0px 0 # 343a7e
Джейден Лоусон
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>

Aashish
источник
6

Этот миксин для SASS даст гладкие результаты, используя 8-осную:

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

И обычный CSS:

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;
Ryall
источник
4

Работа с более толстыми штрихами становится немного беспорядочной, если у вас есть удовольствие от sass, попробуйте этот миксин, не идеально, и в зависимости от веса хода он генерирует достаточное количество 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;
}
evo_rob
источник
1
Этот миксин не работал для меня, но этот работал: gist.github.com/nathggns/2984123
akirk
0

Несколько текстовых теней ..
Примерно так:

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

Демо: http://jsfiddle.net/punosound/gv6zs58m/

punosound
источник
0

Генератор текстовых теней

Здесь много хороших ответов. Казалось бы, тень текста, вероятно, самый надежный способ сделать это. Я не буду вдаваться в подробности о том, как сделать это с текстовой тенью, поскольку другие уже сделали это, но основная идея состоит в том, что вы создаете несколько текстовых теней вокруг текстового элемента. Чем больше текстовый контур, тем больше текстовых теней вам нужно.

Все представленные ответы (на момент публикации) предоставляют статические решения для тени текста. Я выбрал другой подход и написал этот JSFiddle, который принимает цвет контура, размытие и значения ширины в качестве входных данных и генерирует соответствующее свойство text-shadow для вашего элемента. Просто заполните пробелы, проверьте предварительный просмотр и нажмите, чтобы скопировать CSS и вставить его в таблицу стилей.


Ненужное приложение

Очевидно, что ответы, содержащие ссылку на JSFiddle, не могут быть опубликованы, если они также не содержат код. Вы можете полностью игнорировать это приложение, если хотите. Это JavaScript из моей скрипки, который генерирует свойство text-shadow. Обратите внимание, что вам не нужно внедрять этот код в свои собственные работы:

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;
}
b_laoshi
источник
-2

У меня тоже была эта проблема, и это text-shadowбыло невозможно, потому что углы выглядели бы плохо (если бы у меня не было много много теней), и я не хотел размытия, поэтому единственным другим вариантом было сделать следующее: 2 div, и для фона div, поместите -webkit-text-strokeна него, который затем позволяет набрать как можно больше контуров.

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>  

Используя это, я смог получить линию Out , потому что stroke-widthметод не был вариантом, если вы хотите, чтобы ваш текст оставался разборчивым с очень большим контуром (потому что с stroke-widthконтуром начнется внутри надписи, что делает его неразборчивым, когда ширина становится больше, чем буквы.

Примечание: причина, по которой я нуждался в таком жирном наброске, заключалась в том, что я подражал названиям улиц в «картах Google» и хотел, чтобы жирный белый ореол вокруг текста. Это решение отлично сработало для меня.

Вот скрипка, показывающая это решение

введите описание изображения здесь

Джаред
источник
-15

Вот файл CSS, надеюсь, вы получите то, что хотите

/* ----- 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 - - - */
user3131300
источник
9
Пожалуйста, опишите ваше решение. Даже если это работает, у нас нет понятия, как его использовать.
Патрик Хофман
3
Я надеюсь, что правильные решения не должны занимать 200 строк CSS.
Дарбуб
2
Этот ответ не имеет буквального смысла вообще.
Сверхсветовой