Difference between revisions of "High contrast tests"

From Level Access Web Labs
Jump to navigation Jump to search
Line 34: Line 34:
 
       height:153px;
 
       height:153px;
 
   }
 
   }
 +
    .test:before {
 +
      content: url("https://labs.levelaccess.com/images/f/ff/Small_star.jpg");
 +
      background-size: 1em 2em;
 +
      width:2em;
 +
      height:2em;
 +
      display: inline-block;
 +
    }
 
   </style>
 
   </style>
 
<body>
 
<body>
Line 46: Line 53:
 
   <div> input with box shadow and no border</div>
 
   <div> input with box shadow and no border</div>
 
   <input class="box_shadow border_none" id="i3" type="text" />
 
   <input class="box_shadow border_none" id="i3" type="text" />
    <p>background image with transparent color</p>
+
  <p>background image with transparent color</p>
    <div id="bg1">This is some text.</div>
+
  <div id="bg1">This is some text.</div>
 +
  <div>Pseudo before image</div>
 +
  <p class="test">This is a paragraph</p>
 
</body>
 
</body>
 
</html>
 
</html>
  
 
[[Category:High Contrast]]
 
[[Category:High Contrast]]

Revision as of 15:50, 26 March 2018

  • IE 11 will
    • change the color when present - for example of light gray border to high contrast border.
    • show pseudo classes
  • IE 11 will NOT
    • display box-shadow
    • display background images
    • High contrast does not enable the following when they are not present
      • Outline: none on link and probably other elements
      • text-decoration on link
      • Border on input and probably others

Input without border

Link without outline or text decoration

Google

Input with light border

Input with box shadow

input with box shadow and no border

background image with transparent color

This is some text.
Pseudo before image

This is a paragraph