I have a default a:hover styling however for certain things I have written a separate button class for when I want something to display as a button.
I wish for this:
.AeroButtonSlim hover
{
color: #FF0000;
cursor:pointer;
box-shadow: 1px 1px 10px 1px #42C0C4;
opacity: 0.70;
}
to override the default one, but I don't want to constantly use the !important feature.
AeroButtonSlim:hover` not space
.AeroButtonSlim:hover
{
color: #FF0000;
cursor:pointer;
box-shadow: 1px 1px 10px 1px #42C0C4;
opacity: 0.70;
}
Related
In my app a frequently used HTML component is styles as:
.box {
min-width: 100px;
padding: 20px 10px;
}
there are a lot of these (100+) and their border is styled without bottom and different by color:
.box:nth-child(1) {
border: 2px solid red;
border-bottom: none;
}
.box:nth-child(2) {
border: 2px solid green;
border-bottom: none;
}
.box:nth-child(3) {
border: 2px solid blue;
border-bottom: none;
}
.box:nth-child(4) {
border: 2px solid yellow;
border-bottom: none;
}
...
There's a page in the app where all these boxes need to be displayed with full border (including the bottom border) - what is needed is to remove the 'boder-bottom:none' definitions. So in this specific page I've tried to override the .box definition:
.box {
border-bottom: initial; /* tried unset as well...*/
}
But this still results with no border. Is there a way to specify a style so all the .box accepts the full border - or I have to redefine all of the bottom borders?
-Dan
Why not define another class for that component and define border-bottom for that class and put it as !important
.another_class{
border-bottom: 1px solid #efefef !important;
}
border-bottom: initial; won't give you a border.
Set the second definition to border-bottom: 1px solid #efefef;
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*/
}
I've been working on a CSS3 stylesheet for a program. This is the current look of it:
As you can see, I like the design because it's very clean - but one thing that strikes me is that it's very flat.
/* REPORT */
.reportBox{
margin: 30px auto;
width: 60%;
height: 20%;
border-radius: 6px;
background-color: #FFFFFF;
padding: 10px 20px;
}
.reportBox li{
list-style:none;
}
.ulReport{
padding-left:0;
}
I want to create more of a separation/contrast between the content and background.
I was wondering how to make the the white square have more of a shadow or emboss effect/bevels look.
Example:
Could someone help show me an example of it using what I have? I'm assuming I have to mess with the borders and different shades from black to white.
Thank you!
Honestly, I like flat UI and a 1px border if it's needed for contrast, but in any case, you can achieve this effect with a double inset box-shadow like so:
.border {
box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.5);
}
Demo: http://jsfiddle.net/96saR/
You can use the border:outset CSS rule:
button{
border:5px outset grey;
}
That works well but you have limited control on how the colors look. You can have complete control if you define each color:
button{
border-top:5px solid lightgrey;
border-bottom:5px solid grey;
border-left:5px solid lightgrey;
border-right:5px solid grey;
}
Either one works, outset is easier but defining all the colors gives you more control.
JSFiddle Example
Suppose I want create nav-top-menu buttons, each button has anchor tag and href is given. I had style a:hover to each button. When I click through the link, the a:hover to that button I click was gone.I want the anchor hover remain the same after I click the link. It is better I did this in CSS.
button a:hover {
border:1px solid #000;
box-shadow:1px 1px 0px 8px #1fb6dc;
}
Try this one:
button a:hover {
border:1px solid #000;
box-shadow:1px 1px 0px 8px #1fb6dc;
}
button a:active
{
border:1px solid #000;
box-shadow:1px 1px 0px 8px #1fb6dc;
}
You have wrong syntax in your CSS code. Here is the right solution:
a.button:hover {
border:1px solid #000;
box-shadow:1px 1px 0px 8px #1fb6dc;
}
a.button:active {
border:1px solid #000;
box-shadow:1px 1px 0px 8px #1fb6dc;
}
The class of the <a> is button.
In your question, you've used the selector:
button a:hover
This is almost certainly not the selector you need to use, this selects an element inside a element in its hover state. You might have your .button class on the actual link and then select them with:
a.button:hover
this selects an element in it's hover state.
Back to your main question, to style the link in its "active" or after it has been "activated", you need to use the :active pseudo-class selector. You should also use the :focus selector so that people using just the keyboard will see your style change too.
a.button:hover,
a.button:focus,
a.button:active {
border: 1px solid #000;
box-shadow: 1px 1px 0px 8px #1fb6dc;
}
Here I've chained all the selectors together to save you repeating the styles. You could also do it without the "a" element selector in there (depending on your other css):
.button:hover,
.button:focus,
.button:active {
border: 1px solid #000;
box-shadow: 1px 1px 0px 8px #1fb6dc;
}
If it works this way, it will make you're css a bit more flexible (see object oriented css).
I'm having a problem with an box and its associated css outline style. When the box is focused, it should have a blue outline (working). On form validation, if there is a problem, the .error class is added changing the outline and background color red (not working)
On focus I have a style:
input, select {
font-size: 10pt;
border: solid 1px #9598a0;
padding: 2px;
}
input:focus{
background: #EFF5FF;
color: black;
outline: solid 2px #73A6FF;
}
For the error:
input.error:focus, .error {
outline: 2px solid red;
background: rgb(255,240,240);
}
The problem is that the outline without focus is on the outside of the input box while the outline on focus is on the inside of the box so the element jumps as you click on it (CHROME).
Please see this image:
First is on focus, second is no focus with error, third is error with focus. Notice how the no focus causes the border to expand outside the object.
Is there a good way to fix this?
Try setting outline-offset explicitly. Any valid (see Syntax section) value should do, but for moving outline inside the element a negative one can be applied, for example:
JSFiddle
input {
background: #EFF5FF;
outline: solid 2px #73A6FF;
outline-offset: -2px;
}
input.error {
outline: 2px solid red;
background: rgb(255,240,240);
}
Although you are asking about Chrome, be aware that outline-offset property is not supported in IE.
Change every outline to border and give the basic input selector a transparent border (could be grey too for example) for it not to push the second input around et Voilá :) (Updated JSFiddle)
input{
font-size: 10pt;
border: solid 1px #9598a0;
padding: 2px;
border: solid 2px transparent;
}
input:focus{
background: #EFF5FF;
color: black;
border: solid 2px #73A6FF;
}
input.error:focus{
border: 2px solid red;
background: rgb(255,240,240);
}
.error {
border: 2px solid red;
background: rgb(255,240,240);
}