Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to gray out a HTML element

Tags:

html

css

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!

like image 497
Jonathan Avatar asked Feb 22 '11 17:02

Jonathan


People also ask

How do you GREY out an element in HTML?

If all you want to do is make it look gray then just give it background and border colors of shades of gray.

How do I gray out a textbox in HTML?

The disabled="disabled" parameter is the standard way to do this, and you could use something like jQuery to dynamically disable all of the form elements contained in a fieldset (Which is the standard way of grouping related form elements) on the fly.

How do I GREY out a checkbox in HTML?

You can style checkbox label and readonly inputs with CSS, e.g.: input [readonly="readonly"] {} but the browser should make the checkbox should appear greyed out when set to readonly. "checkbox itself should appear greyed out just by setting the readonly attribute" - Tried in IE8, FF12. 0, Chrome.

How do you make elements invisible?

You can hide an element in CSS using the CSS properties display: none or visibility: hidden . display: none removes the entire element from the page and mat affect the layout of the page. visibility: hidden hides the element while keeping the space the same.


1 Answers

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/

like image 52
Chandrakant Avatar answered Nov 16 '22 03:11

Chandrakant