Once we select the any tabs like account,bills,data,usage.Hovering working perfect.
But selected backgroundcolor is not active state,
Here is my css
.header :active, .footer:active {
border: none;
background:yellow;
box-shadow: 0px 0px 1px #777;
}
JSFiddle
Live demo
you should remove the space between header and :active
.header:active, .footer:active {
border: none;
background:yellow;
box-shadow: 0px 0px 1px #777;
}
Related
I have the following very basic HTML code:
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
outline: none;
}
a {
padding: 6px 20px;
border: 1px solid #bdbdbd;
border-radius: 6px;
text-decoration: none;
font-size: 100px;
}
a:active {
box-shadow: 0px 0px 4px 0px #b9b9b9;
-webkit-box-shadow: 0px 0px 4px 0px #b9b9b9;
}
</style>
<title>IPhone - Button</title>
</head>
<body>
Long Press This
</body>
</html>
and when I open it on a real IPhone device I get the following:
but when I long press the button I get the following:
with that very annoying gray-highlighted background.
I get that annoying effect only on IPhone. I tried the same on the rest of browsers (Android, Windows, MacOS) without getting that effect.
Any idea on how to get rid of that?
Here you have an inline demo of the code:
* {
outline: none;
}
a {
padding: 6px 20px;
border: 1px solid #bdbdbd;
border-radius: 6px;
text-decoration: none;
font-size: 40px;
}
a:active {
box-shadow: 0px 0px 4px 0px #b9b9b9;
-webkit-box-shadow: 0px 0px 4px 0px #b9b9b9;
}
Long Press This
Please, notice that I need that box-shadow above at the same time I get rid of the gray highlight. In other words, I need the same effect I get on the rest of browsers.
Here it is also on JSFiddle.net:
http://jsfiddle.net/05kqt7m3/
http://jsfiddle.net/05kqt7m3/embedded/result/
Thanks!
Have you tried:
<style type="text/css">
* {
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
}
</style>
As shown in Disabling user selection in UIWebView
I have the following code to create a border around all images as well as hover effects, but how do I disable this on selected images (ie. social buttons or logo)
img {
padding: 5px;
border: solid 1px #EFEFEF;
}
a:hover img {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}
you could add a class to the image that you want/dont want to have the borders, then style them differently by using their class in the css instead.
You should write in css the full path to the image,for example
div.hover-img ul li p a:hover img {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999; }
This additional class .hover-img and the path to the image helps you identify only the images you need to be bordered in hover position.
add a seperate class
.noshadow{ border:none; box-shadow:none}
Add this class to the element where you don't required the box-shadow and border
use the css not selector
like this
html markup
<div>
<img src="http://images03.olx.in/ui/3/20/99/45761199_1.jpg" alt="not found"/>
<img src="http://i1-news.softpedia-static.com/images/news2/Facebook-Changes-Font-Size-Users-Grab-Their-Pitchforks-2.jpg" alt="not found" class="noborder"/>
</div>
css
img:not(.noborder) {
border: 2px solid red;
}
see the Documentation and use here
Demo Fiddle
I have a bootstrap button over which I want to have a bubble with a number, much like a notification that appears on an app icon in an iphone.
My mark up for the button is:
<button class="btn btn-warning view-sl-btn" type="button"><span class="notification, red">6</span>View Shortlist</button>
And the Css for the span is:
.btn.span {
position: absolute;
background-color: #f56c7e;
border: 1px solid #ce4f5e;
padding: 2px 5px 1px;
margin-left: -2px;
margin-top: -16px;
border-radius: 100px;
color: #fff;
text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
font-size: 11px;
-webkit-box-shadow: inset 0px 1px 2px rgba(255,255,255,0.4);
-moz-box-shadow: inset 0px 1px 2px rgba(255,255,255,0.4);
-o-box-shadow: inset 0px 1px 2px rgba(255,255,255,0.4);
box-shadow: inset 0px 1px 2px rgba(255,255,255,0.4);
}
.btn.span.red {
background-color: #f56c7e;
border-color: #ce4f5e;
}
But it doesn't seem to work.
Any advice will be much appreciated.
Cheers
The issue is with your CSS declaration:
.btn.span
(Would apply styles to all elements with the 'btn' class AND the 'span' class.)
<div class="btn span" />
You want this:
.btn span
(Which would style all spans that are descendants of an element with the 'btn' class.)
Use the following instead
.btn span
Yes, .btn span is the proper syntax for the css since span is an HTML tag. The use of the period before the span would suggest it is a css class, which it is not.
How do I get rid of the shadow in the red area below? I have seen other similar questions but don't know how to apply that here.
Live Demo: http://jsfiddle.net/xFa9M/
CSS:-
#list li{
border: 2px solid black;
border-top-width: 1px;
border-bottom-width: 1px;
padding: 4em;
z-index: 1;
}
#list li .tip{
position: absolute;
left: 200px;
top: 0px;
border: 2px solid black;
border-left-width: 0px;
z-index: 0;
display: none;
}
#list li:hover{
-moz-box-shadow: -5px 5px 5px black;
-webkit-box-shadow: -5px 5px 5px black;
box-shadow: -5px 5px 5px #555;
}
#list li:hover .tip{
-moz-box-shadow: -5px 5px 5px black;
-webkit-box-shadow: -5px 5px 5px black;
box-shadow: -5px 5px 5px #555;
}
Html:-
<ul id="list">
<li class="top">About Me
<div class="tip">Asas</div>
<li>Garage
<li class="bottom">My Blog
</ul>
Please note that it is ok for me to use JS code tricks, if needed.
If I understand correctly, you are having problems with the middle li's having shadow, while you only want the first (and maybe last) li to have shadow.
If I understood correctly, you could use the li:first-child and li:last-child to set the shadow to the first and last element of your list.
But this is not the case. If you want to hide the left shadow on your .tip, you should set the first paramater of box-shadow to 0px. The first parameter is the horizontal offset.
Like here:
http://jsfiddle.net/rf47W/
Was this what you were looking for?
You cannot.
In order to get around the issue, don't assign dropshadows to the "about me" and "asas" boxes separately, but rather wrap them in a single container and apply the shadow to it.
Have you tried targeting that element with a specific class/id/whatever selector and inserting
the code below?
-moz-box-shadow:none;
-webkit-box-shadow: none;
box-shadow: none;
The CSS and HTML given does not produce the display shown in the image, so I'm having to guess, but try wrapping the asas box in another box with bottom padding and hidden overflow.
I have an unordered list I'm using for a menu. Each item has a background image and a :hover image. The background image on the first element is different that the rest, so I use the following to style it, which works fine:
#prodNavBar ul:last-child li:first-child {...}
Since I want a roll-over image on this element as well, I've tried adding :hover, like so:
#prodNavBar ul:last-child li:first-child:hover {...}
...but this doesn't work. What's the syntax to combine :first-child and :hover?
Chaining :first-child and :hover as you do here should work just fine. If you're using IE6, however, only the last pseudo-class in the chain will be recognized.
In other words, you're doing it right.
li:first-child:hover should work. Which browser are you testing with? IE doesn't support last-child
Here is a sample test case.
SOLVED Similar Question Answered
.aston-menu-light>ul>li:last-child > a:hover {
color:red !important;
}
You can also use the following css code
#prodNavBar ul:last-child li:nth-child(2n-1):hover
#prodNavBar ul:last-child li:nth-child(2n):hover
I use this in my project
.buttons button:nth-child(2n) { background: white; border: 1px solid white; border-radius: 3px; box-shadow: 0 0 3px tomato; transition: box-shadow .2s ease-in-out; }
.buttons button:nth-child(2n):hover { box-shadow: 0 0 10px tomato; }
.buttons button:nth-child(2n):active { box-shadow: 0 0 10px tomato; border: 1px solid tomato; }
.buttons button:nth-child(2n-1) { background: white; border: 1px solid white; border-radius: 3px; box-shadow: 0 0 3px #39FF14; transition: box-shadow .2s ease-in-out; }
.buttons button:nth-child(2n-1):hover { box-shadow: 0 0 10px #39FF14; }
.buttons button:nth-child(2n-1):active { box-shadow: 0 0 10px #39FF14; border: 1px solid #39FF14; }
<div class="buttons">
<button type="submit">submit</button>
<button type="reset">reset</button>
</div>