How to grey out a box in CSS - css

Question

I have an element #messages-box, which include title, body, sender, avatar and excerpt. Now, I would like to grey out all elements in #message-box.
I know I can set properties of each of elements to make them all grey. But is there a way so that I can just change properties of #message-box?
All I need is something like a grey veil covers #message-box.
Thank you.

Answer 1

Why not use opacity?
Say something like:
#message-box {opacity: 0.5;}
If you are trying to actually disable it (i.e. don't allow any click events on it), you can use pointer-events: none;. Browser support in 2016 is very good.
Update February 1st, 2017
This answer is still getting some attention so I decided to provide a better, visually more attractive example. (I suggest opening the example in full screen.)
In the example below I added my previous approach: use opacity to create a 'grayed out' look. However, by using the filter property you can actually gray it out. Support is good, if you don't need IE support. By using values such as grayscale and blur, and even by combining those with the opacity property, a visually appealing 'gray out' effect can be reached.
Note that I didn't add pointer-events: none in this example, but it could still be useful for your specific case!
const messageBox = $("#message-box");
$("button[data-gray-class]").click(function() {
const $this = $(this);
const classToAdd = $this.attr("data-gray-class");
messageBox.removeClass();
$this.siblings().removeClass("active");
if (classToAdd != 'none') {
messageBox.addClass(classToAdd);
$this.addClass("active");
}
});
* {
box-sizing: border-box;
}
html,
body {
min-height: 100%;
width: 100%;
margin: 0;
}
body {
background: #e55e51;
display: flex;
flex-direction: column;
align-items: center;
padding: 24px;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 1.48;
}
h1,
h2,
h3 {
font-family: 'Comfortaa', cursive;
font-weight: 700;
margin-top: 0;
}
#message-box {
width: 67%;
padding: 0.87em;
background: #fbdd44;
color: #a39135;
max-width: 720px;
min-width: 320px;
margin-top: auto;
}
#message-box h2 {color: #516214;}
img {
float: right;
height: auto;
width: 33.33%;
}
aside {
margin: 16px auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
aside button {
margin: 6px;
font-size: 14px;
background: transparent;
border: 1px solid white;
border-radius: 24px;
padding: 4px 8px;
color: white;
cursor: pointer;
}
aside button:hover,
aside button:active,
aside button.active,
aside button[data-gray-class="none"] {
background: white;
color: #ff6f61;
}
aside button[data-gray-class="everything"] {
border-width: 2px;
}
aside button[data-gray-class="none"]:hover {
border-color: white;
background: #ff6f61;
color: white;
}
aside button:focus {
outline: 0 none;
}
/* These classes determine the different appearances */
.opacity {
opacity: 0.6;
}
.grayscale {
filter: grayscale(100%);
}
.blur {
filter: blur(3px);
}
.opacitygrayscale {
opacity: 0.6;
filter: grayscale(100%);
}
.opacityblur {
opacity: 0.6;
filter: blur(3px);
}
.grayscaleblur {
filter: blur(3px) grayscale(100%);
}
.everything {
filter: blur(3px) grayscale(100%);
opacity: 0.6
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Comfortaa:700|Source+Sans+Pro" rel="stylesheet">
<div id="message-box">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="StackOverflow logo">
<h2>I am a message box</h2>
<p>Sent by <em>StackOverflow</em></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis.
Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed,
euismod in, nibh.</p>
</div>
<aside>
<button data-gray-class="none">Reset</button>
<button data-gray-class="opacity">Opacity</button>
<button data-gray-class="grayscale">Grayscale</button>
<button data-gray-class="blur">Blur</button>
<button data-gray-class="opacitygrayscale">Opacity & grayscale</button>
<button data-gray-class="opacityblur">Opacity & blur</button>
<button data-gray-class="grayscaleblur">Grayscale & blur</button>
<button data-gray-class="everything">Opacity, grayscale & blur</button>
</aside>
Update February 7th, 2018
Because of continuing attention, I visually updated the snippet above and added some options. Enjoy.

Answer 2

Create another div that sits on top of #message-box with an opacity of say, 50% and a background-color of gray. When you need to, just show this overlay div. A demo is forthcoming.
Here's a nice demo to show you what I'm talking about. This approach also has the benefit (if, as I assume, you're attempting to 'disable' the message div) of prevent any clicks from reaching the div below it, which effectively disables the below div.
$(document).ready(function() {
$("#myDiv").click(function() {
$("#overlay").show();
});
});
#myDiv {
width: 100px;
height: 100px;
background-color: yellow;
margin: 50px 50px;
padding: 10px;
}
#overlay {
display: none;
position: absolute;
width: 100px;
height: 100px;
background-color: gray;
top: 50px;
left: 50px;
padding: 10px;
opacity: .8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<p>Some text</p>
<input type="button" value="A button" />
</div>
<div id="overlay"></div>

Answer 3

May be you can write like this:
#message-box > * {
background-color: grey;
}

Answer 4

Unlike other solution this provide exactly what you need(disable the items).
Do you use jQuery? If you do it's very easy. You will have to call $('#messages-box').children().attr("disabled", "disabled");
This allows the input the be disable.
This is the link to the code I used to test this. http://jsfiddle.net/Vu4Dw/
and then you could just use other user "grey out css thing" to get the effect..
Hopes this helps.

Answer 5

These are all good answers. Some are more elaborate than others. I like changing the opacity so you don't loose the styling. I just thought I would add a reminder to use the disabled attribute on the button for screen readers.
You can manipulate this as well using javascript like so:
document.getElementById('IdName').disabled = true;

Answer 6

There are a lot of options you can do opacity, maybe a transition, but I would just use the css code: cursor: not-allowed;

Answer 7

You could also toggle a class, and let CSS' :before handle it:
#messagebox{
position: relative;
}
#messagebox.inactive:before{
display: block;
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
You could add a extra class (eg lockable), which would allow you to reuse it instead of using hardcoded IDs.

Answer 8

Add a class to the box and base any 'greyed out' styles on that class. That way, you only have to toggle one class in one place to make all the changes.