CODEWITHSUNDEEP
htmlcss
Jonathan
Jonathan

Reputation: 2358

How to gray out a HTML element

I would like to gray out a HTML table to make it appear that it does not apply instead of hidding it. Any ideas on how this can be done? Hopefully with CSS!

Upvotes: 14

Views: 47688

Answers (2)

Chandrakant
Chandrakant

Reputation: 1981

if you only want to gray out all HTML then you can use filters

.grayscale { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
  }

if you want user should not click on it, then place empty DIV with absolute position and 100% height / width.

here is working code https://jsfiddle.net/rb4f7wf6/

Upvotes: 13

BalusC
BalusC

Reputation: 1108782

Lower the opacity.

<table class="grayout">
    ...
</table>

.grayout {
    opacity: 0.6; /* Real browsers */
    filter: alpha(opacity = 60); /* MSIE */
}

Upvotes: 70

Related Questions