I have this CSS code for a textbox class and I'm on working on linux.
It's saved in a .css file and i'm using gedit. But the box-shadow property isn't recognized. All the others have that different font which shows a keyword or so. But not box-shadow. Any ideas please? It seems to work on windows when i use notepad++.
.textbox
{
background: white;
border: 1px solid #ffa853;
border-radius: 5px;
box-shadow: 0 0 5px 3px #00FFFF;
color: #666;
outline: none;
height:23px;
width: 275px;
}
You may be confusing box-shadow with text-shadow.
text-shadow applies to text, box applies to containers
I have made a small fiddle to demonstrate both
div {
width: 200px;
height: 300px;
background-color: #fff;
box-shadow: 10px 10px 5px grey;
}
p {
text-shadow: 1px 1px 2px black;
color: red;
font-size: 5em;
}
<div>
<p>
hello
</p>
</div>
if you are trying to adjust the appearance of an input (or a number of inputs)
a useful way of doing it is:
input[type="text"] {
/*your styles here*/
}
Related
I am trying to use Active Pseudo CSS class on text box in Firefox but seems like it is not working. Could any one suggest me a solution. below is the css code i am using :
hover is working fine. but on clicking on text box , active class should have been applied but it isnt.
.txtLogin
{
width: 100px;
float: right;
padding: 1px !important;
border: 1px solid #ccc;
height: 20px;
font-size: 12px;
font-weight: normal;
color: #000;
font-family: Arial;
}
.txtLogin:hover
{
background: #ededed;
border: 1px solid #bfbfbf;
border-top: 1px solid #b5b5b5;
}
.txtLogin:active
{
background: #d9d9d9;
border: 1px solid #bfbfbf !important;
}
:active only applies while the mouse button is held down...it is removed when the mouse button is released.
In your case, the pseudo-class is working, just, I suspect, not in the way you were thinking.
#MDN
The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on and HTML elements, but may not be limited to just those.
body {
background: lightblue;
}
.txtLogin {
width: 200px;
padding: 1px !important;
border: 1px solid #ccc;
height: 20px;
font-size: 12px;
font-weight: normal;
color: #000;
font-family: Arial;
}
.txtLogin:hover {
background: #ededed;
border: 1px solid #bfbfbf;
border-top: 1px solid #b5b5b5;
}
.txtLogin:active {
background: #d9d9d9;
border: 1px solid #bfbfbf !important;
}
<input type="textarea" class="txtLogin">
I had raised a bug for the same and mozilla has now fixed this bug. Here is the bug id https://bugzilla.mozilla.org/show_bug.cgi?id=1168055 . They have provided a patch for the same.
I think you are looking for focus. Try it like below.
.txtLogin:focus
{
background: #ff00ff;
border: 1px solid #bfbfbf !important;
outline:none;
}
DEMO
I want to style my own button. I've managed to get rid of the default style, but now I want to add a thin blue border around it, but don't know how. If I just get rid of the border: none, then the default style comes back, which is not what I want
This is my style.css:
input#hideshow{
margin: 0;
border: none;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border-color: #7BC2E3; //not showing up though
width: 280px;
text-align: left;
}
You also need to specify border-style because it's default value is none demo.
But the easiest way is to use the border short hand and also specify
border-width:
border:1px solid #7BC2E3;
and remove border:none;
DEMO
CSS :
input#hideshow{
margin: 0;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border:1px solid #7BC2E3;
width: 280px;
text-align: left;
}
U just specified the border color alone. U forget to specify border width
Demo
border: 2px solid #7BC2E3;
Your CSS works perfectly. But you don't want it to work this way. You set border to none so no border is displayed. You better should set to, for instance:
border: 1px solid #7BC2E3;
And remove the border-color line.
https://developer.mozilla.org/en-US/docs/Web/CSS/border
Try doing this:
input#hideshow{
margin: 0;
border:1px solid blue;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border-color: #7BC2E3; //not showing up though
width: 280px;
text-align: left;
}
Hope this is what you want.
Try like this: Demo
border:1px solid #7BC2E3;
and remove
border:none from your code
Here I am using Oracle ADF.
My button is styled as follows:
af|commandButton:text-only {
background-image: none;
width: auto;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
af|commandButton:text-only:focus {
background-image: none;
width: auto;
outline: none;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
Removed focus outline using "outline:none;" as specified in the CSS snippet.
Now, focus outline is removed in all browsers except firefox.
As per the diagnosis I found that firefox uses "-moz-focus-inner" to render outline.
I tried the following two ways in CSS but no luck.
First way:
button::-moz-focus-inner {
border: 0;
}
Second way:
af|commandButton:text-only:focus::-moz-focus-inner,
af|commandButton:focus::-moz-focus-inner {
border:0;
}
How to specify styles for "-moz-focus-inner" in ADF ?
I had the same problem with my xul programm. The point was, that there was some shadow DOM hidden in the button, which has the dotted border.
This is how I made it work:
button *, button:focus *
{
border: 0;
}
Keep in mind, that the element within the button has a transparent border when the button is not in the :focus state. Therefor you have either to clear it for both states or just set the border to transparent too at :focus.
Hope that helps you too
I have the following div stricture.
<div class="profile_outer>
<div class="profile"></div>
</div>
And the following CSS
.profile_outer {
border: 2px solid #660000;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
}
.profile {
width: 198px;
height: 225px;
border: 1px solid #660000;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 100;
}
.profile_outer:hover {
background-color: blue;
}
you can find the fiddle here
Both divs do not have a background, the background is determined by an image on some parent div. So they are transparent.
So, on a hover I just want to change the background of the outer profile. It only works if I also change the background color of the inner div using
.profile_outer:hover .profile {
display: block;
background : #fff; // but I do NOT want to change the background
}
I tried the following combinations of these:
.profile_outer:hover .profile {
display: block;
background : none !important;
background-color:transparent;
}
Thanks for your help.
Well, I guess that the effect that you want is this
.profile_outer {
border: 2px solid #660000;
border-radius: 5px;
overflow: hidden;
}
.profile {
width: 198px;
height: 225px;
border: 1px solid #660000;
border-radius: 5px;
z-index: 100;
}
.profile:hover {
box-shadow: 0px 0px 0px 1000px blue;
}
fiddle
... but you should review your ideas about transparency ...
After re-reading the question, I think that Moob's sugestion is right, the answer to the question is
.profile_outer:hover .profile {box-shadow: 0px 0px 0px 1000px blue;}
Set the child's background to #fff and it'll work.
Your problem happens because the default background color for all elements is transparent
There is one other way to get this effect but it could be really annoying to implement. I'm only offering it up as a solution for completeness. Effectively you have the SAME background image on the bit that is supposed to appear masked:
body {
margin:0px;
background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') 0 0 repeat;
}
.profile_outer {
margin:20px; /* added this just to show that you'd need to offset the image placement in .profile depending on its position */
}
.profile {
background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') -20px -20px repeat;
}
http://jsfiddle.net/PdQFJ/1/
I have the following CSS:
box-shadow: inset 0px 0px 2px #a00;
Now I am trying to extract that color to make the page colors 'skinnable'. Is there any way of doing this? Simply removing the color, and then using the same key again later overwrites the original rule.
There doesn't seem to be a box-shadow-color, at least Google turns nothing up.
Actually… there is! Sort of. box-shadow defaults to color, just like border does.
According to http://dev.w3.org/.../#the-box-shadow
The color is the color of the shadow. If the color is absent, the used
color is taken from the ‘color’ property.
In practice, you have to change the color property and leave box-shadow without a color:
box-shadow: 1px 2px 3px;
color: #a00;
Support
Safari 6+
Chrome 20+ (at least)
Firefox 13+ (at least)
IE9+ (IE8 doesn't support box-shadow at all)
Demo
div {
box-shadow: 0 0 50px;
transition: 0.3s color;
}
.green {
color: green;
}
.red {
color: red;
}
div:hover {
color: yellow;
}
/*demo style*/
body {
text-align: center;
}
div {
display: inline-block;
background: white;
height: 100px;
width: 100px;
margin: 30px;
border-radius: 50%;
}
<div class="green"></div>
<div class="red"></div>
The bug mentioned in the comment below has since been fixed :)
No:
http://www.w3.org/TR/css3-background/#the-box-shadow
You can verify this in Chrome and Firefox by checking the list of computed styles. Other properties that have shorthand methods (like border-radius) have their variations defined in the spec.
As with most missing "long-hand" CSS properties, CSS variables can solve this problem:
#el {
--box-shadow-color: palegoldenrod;
box-shadow: 1px 2px 3px var(--box-shadow-color);
}
#el:hover {
--box-shadow-color: goldenrod;
}
You can do this with CSS Variable
.box-shadow {
--box-shadow-color: #000; /* Declaring the variable */
width: 30px;
height: 30px;
box-shadow: 1px 1px 25px var(--box-shadow-color); /* Calling the variable */
}
.box-shadow:hover {
--box-shadow-color: #ff0000; /* Changing the value of the variable */
}
You could use a CSS pre-processor to do your skinning. With Sass you can do something similar to this:
_theme1.scss:
$theme-primary-color: #a00;
$theme-secondary-color: #d00;
// etc.
_theme2.scss:
$theme-primary-color: #666;
$theme-secondary-color: #ccc;
// etc.
styles.scss:
// import whichever theme you want to use
#import 'theme2';
-webkit-box-shadow: inset 0px 0px 2px $theme-primary-color;
-moz-box-shadow: inset 0px 0px 2px $theme-primary-color;
If it's not site wide theming but class based theming you need, then you can do this: http://codepen.io/jjenzz/pen/EaAzo
A quick and copy/paste you can use for Chrome and Firefox would be: (change the stuff after the # to change the color)
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-border-radius: 10px;
-moz-box-shadow: 0 0 15px 5px #666;
-webkit-box-shadow: 0 0 15px 05px #666;
Matt Roberts' answer is correct for webkit browsers (safari, chrome, etc), but I thought someone out there might want a quick answer rather than be told to learn to program to make some shadows.