Can I style an image s ALT text with CSS

Question

I have a dark blue page and when the image is loading  or missing  the ALT text is black and difficult to read  in FF     Could I style it  with CSS  to be white

User · Answer

You cant style the alt attribute directly in css. However the alt will inherit the styles of the item the alt is on or what is inherited by its parent:

_x000D_

    <div style="background-color:black; height: 50px; width: 50px; color:white;">_x000D_
    <img src="ouch" alt="here i am"/>_x000D_
    <div>

_x000D_

In the above example, the alt text will be black. However with the color:white the alt text is white.

User · Answer

Yes  image alt text can be styled using any style property you use for regular text  such as font-size  font-weight  line-height  color  background-color etc  The line-height  of text  or vertical-align  if display table-cell used  could also be used to vertically align alt text within an image element or image wrapping container  i e  div  To prevent accessibility issues regarding contrast  and inheriting the browser s default black font color when you ve set a dark blue background-color  always set both the color of your font and its background-color at the same time  for some more useful info  visit Alternate text for background images or The Ultimate Guide to Styled ALT Text in Email

User · Answer

You can use img alt   styles  to style only the alternative text

User · Answer

In Firefox and Chrome  and possibly more  we can insert the string                into the alt text of an image that hasn   t loaded    x000D   x000D  img   x000D    font-style  italic  x000D    color   c00  x000D    x000D   x000D  img after   x000D    content     Image - Right click to reload if not loaded    x000D    x000D   x000D  img  after   x000D    content     Image - Right click to reload if not loaded    x000D    x000D   lt img alt  Alt text -     gt  x000D   x000D   x000D

User · Answer

as this question is the first result at search engines  There are a problem with the selected -and right by the way- solution  is that if you want to add style that will apply to images like   borders for example      for example     x000D   x000D  img   x000D    color  fff  x000D    border  1px solid black  x000D    padding  5px  x000D    background-color   ccc  x000D    x000D   lt img src  http   badsrc com blah  alt  BLAH BLAH BLAH    gt   lt hr   gt  x000D   lt img src  https   cdn4 iconfinder com data icons miu-square-flat-social 60 stackoverflow-square-social-media-128 png  alt  BLAH BLAH BLAH    gt  x000D   x000D   x000D    as you can see  all of images will apply the same style    there is another approach to easily work around such an issue  using onerror and injecting some special class to deal with the interrupted images     x000D   x000D   invalidImageSrc   x000D    color  fff  x000D    border  1px solid black  x000D    padding  5px  x000D    background-color   ccc  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 0 jquery min js  gt  lt  script gt  x000D   x000D   lt img onerror    this  addClass  invalidImageSrc    src  http   badsrc com blah  alt  BLAH BLAH BLAH    gt   lt hr   gt  x000D   lt img onerror    this  addClass  invalidImageSrc    src  https   cdn4 iconfinder com data icons miu-square-flat-social 60 stackoverflow-square-social-media-128 png  alt  BLAH BLAH BLAH    gt  x000D   x000D   x000D

User · Answer

Setting the img tag color works  img  color  fff    http   jsfiddle net YEkAt    x000D   x000D  body  background  000022  x000D  img  color  fff  x000D   lt img src  http   badsrc com blah  alt  BLAH BLAH BLAH    gt  x000D   x000D   x000D

User · Answer

Sure you can   http   jsfiddle net VfTGW   I do this as a fallback for header logo images  I think some versions of IE will not abide  Edit  Or Chrome apparently - I don t even see alt text in the demo     Firefox works well however    x000D   x000D  img   x000D    color  green  x000D    font  40px Impact  x000D    x000D   lt img src  404  alt  Alt Text  gt  x000D   x000D   x000D

[html] Can I style an image's ALT text with CSS?

Examples related to html

Examples related to css