How to grey out a box in CSS
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>
How to gray out a HTML element
Lower the opacity.
<table class="grayout">
...
</table>
.grayout {
opacity: 0.6; /* Real browsers */
filter: alpha(opacity = 60); /* MSIE */
}
CSS/JavaScript Use Div to grey out section of page
You might try the jQuery BlockUI plugin. It's quite flexible and is very easy to use, if you don't mind the dependency on jQuery. It supports element-level blocking as well an overlay message, which seems to be what you need.
The code to use it is as simple as:
$('div.profileform').block({
message: '<h1>Premium Users only</h1>',
});
You should also keep in mind that you may still need some sort of server-side protection to make sure that Non-Premium users can't use your form, since it'll be easy for people to access the form elements if they use something like Firebug.
How can I grey out page except for one element?
Can do it using css box-shadow
.
.box{display:inline-block; width:100px; height:100px; margin-top:50px; text-align:center; padding-top:2em}.box.selected{ box-shadow: 0 0 0 99999px rgba(0, 0, 0, .5);}
<div class="box">Box 1</div><div class="box">Box 2</div><div class="box selected">Box 3</div><div class="box">Box 4</div>
How to grey out parent div and sibling divs with javascript/css
If I understand the problem correctly, you want a transparent overlay over your page, but with a 'hole' in it for one element to show through?
Here is a first pass at the problem. It uses a pseudo-element over the target element that is just 10 pixels wider on either side with a transparent box-shadow on it that extends across the entire viewport. (100vw should be enough, but could be made bigger if necessary). A second inset box-shadow provides the soft edge.
toggleOverlay.addEventListener('click', () => {
foo.classList.toggle('with-overlay');
});
body {
background: antiquewhite;
}
.foo {
padding: 40px;
margin: 100px;
position: relative;
border: solid 1px black;
}
.foo.with-overlay:before {
content: '';
pointer-events: none;
position: absolute;
border-radius: 10px;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
box-shadow: 0 0 0 100vw rgba(1, 1, 1, 0.5), inset 0 0 2px 2px rgba(1, 1, 1, 0.5);
background: transparent;
opacity: 0.8;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="foo" class="foo">
hello world
<button id="toggleOverlay">toggle overlay</div>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Gray out image with CSS?
Does it have to be gray? You could just set the opacity of the image lower (to dull it). Alternatively, you could create a <div>
overlay and set that to be gray (change the alpha to get the effect).
html:
<div id="wrapper">
<img id="myImage" src="something.jpg" />
</div>css:
#myImage {
opacity: 0.4;
filter: alpha(opacity=40); /* msie */
}
/* or */
#wrapper {
opacity: 0.4;
filter: alpha(opacity=40); /* msie */
background-color: #000;
}
Standardized way of graying out normal HTML text
There is actually a standard way to do it, in bootstrap, which is to use to use text-muted
.
In fact, there is a list of standard text shades and colors that are applied directly.
http://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp
As for HTML, having a CSS with a disabled class and applying that to any of your text would be a better option.
Gray out a section of an image with CSS
Pure CSS Solution with no extra markup
JSFIDDLE DEMO
HTML
<div class="image-container">
<img class="image-grey" src="http://placekitten.com/200/150" />
</div>
CSS
.image-container {
position:relative;
display:inline-block;
}
.image-grey {
display:block;
-webkit-filter: grayscale(100%);
}
.image-container:after {
position:absolute;
content:"";
top:0;
left:50%;
width:50%;
height:100%;
background-image:url(http://placekitten.com/200/150);
background-position:top right;
}
how can I greyout a disabled field?
The JSF input component's disabled
attribute doesn't emit a style class like class="disabled"
or something like as your CSS declaration seems to expect. It just sets the HTML-standard disabled
attribute on the generated HTML element. To see it with your own eyes, open the JSF page in your favourite browser, rightclick and View Source. It'll look something like
<input type="text" disabled="disabled" />
You need to use the CSS attribute selector element[attrname]
. If the attribute with attrname
is present on the element
, then the style will be applied.
#content input[disabled] {
color: #DCDAD1;
padding: 2px;
margin: 0 0 0 0;
background-image: none;
}
(please note that I fixed the background-image
declaration as well as it was invalid)
HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?
This answer illustrates a pre-HTML5 approach. Please take a look at Psytronic's answer for a modern solution using the placeholder
attribute.
HTML:
<input type="text" name="firstname" title="First Name" style="color:#888;"
value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />
JavaScript:
function inputFocus(i) {
if (i.value == i.defaultValue) { i.value = ""; i.style.color = "#000"; }
}
function inputBlur(i) {
if (i.value == "") { i.value = i.defaultValue; i.style.color = "#888"; }
}
Related Topics
How to Change Color Property of Mat-Slide-Toggle/ Overwrite CSS of Component
Angular Material Mat-Drawer in Full Height Flex, Content Overflow Auto
How to Word-Wrap Long Words in a Div
Fill Remaining Vertical Space With CSS Using Display:Flex
Css Child VS Descendant Selectors
::Slotted CSS Selector For Nested Children in Shadowdom Slot
How to Select an Element Based on the State of Another Element in the Page With Css
Select Element Based on Multiple Classes
How to Center Align Horizontal ≪Ul≫ Menu
How to Change the Color of an Svg Element
Ipad Safari Scrolling Causes HTML Elements to Disappear and Reappear With a Delay
Align Child Elements of Different Blocks
Remove White Space Below Image