I'm fighting with (yet-another) IE8 bug.
Basically, I have a small square container, with an arrow inside built with the :before and :after pseudoelements. The HTML goes something like this:
<div class="container">
<div class="arrow" />
</div>
And the CSS for that is
.container {
height: 58px;
width: 58px;
background-color: #2a5a2a;
}
.arrow {
padding-top: 7px;
}
.arrow:before {
margin: 0 auto;
content: '';
width: 0;
border-left: 12px transparent solid;
border-right: 12px transparent solid;
border-bottom: 13px gray solid;
display: block;
}
.arrow:after {
margin: 0 auto;
content: '';
width: 12px;
background-color: gray;
height: 14px;
display: block;
}
Now, I want the arrow inside it to change color when I hover over the container. I added this CSS:
.container:hover .arrow:after {
background-color: white;
}
.container:hover .arrow:before {
border-bottom-color: white;
}
And that's where the problem begins. That works on most browsers, but on IE8 the background-color property is not overridden. So I get only the tip of the arrow with the new color, but not the square that makes the "body" of it.
To make things more interesting, if I add the following to also change the container background-color to something slightly different, then everything starts to work and the background-color for the arrow changes!
.container:hover {
background-color: #2a5a2b;
}
If I only set the :hover status for the container, and I set THE SAME background color that it already had, then IT DOESN'T WORK. I have to change it if I want the background-color to change.
Here's a jsfiddle if you want to try it: http://jsfiddle.net/Ke2S6/ Right now it has the same background color for the container on hover, so it won't work on IE8. Change one single digit and it'll start working.
So... any ideas?
Related
Morning,
I have the following code that works in all browsers other than IE. I want a blue border to appear when clicking on input boxes, however did not want to see the elements resizing and positioning. I fixed this by putting a border colour to match the background colour, thus removing the resizing effect. However, on IE, you get ghost borders which seem to be a combination of both the border radius and border colour (background colour). Any ideas of how to fix this without using box shadow?
Screen Shot showing ghost borders:
input,
textarea,
select {
position: relative;
display: block;
border: 3px solid #4f4f4f;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
&:focus {
outline: none;
border: 3px solid #4cc7fa;
}
}
Many thanks!
You can do like this to overcome the ghost/resize/re-positioning effect, where you change border-width on focus and compensate its re-positioning with a negative top
body {
background: gray;
}
input,
textarea,
select {
position: relative;
display: block;
border: 0px solid gray;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
}
input:focus {
top: -3px;
outline: none;
border: 3px solid #4cc7fa;
}
<input type="text">
I would use the following javascript:
Your-function() {
document.getElementsByTagName('input','textarea','select').classlist.toggle('show')
}
add display:none to input:focus
add the following css
.show
{
display:block;
}
Note: Add onclick="Yourfunction()" to your markup to load the js.
I am working on a new button styles and currently facing a challenge: my <button> CSS :hover selector is not behaving as expected.
All attempts to making it work have proven futile.
How can I possibly achieve that effectively?
Below is my code:
.button_depression {
background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif)
no-repeat;
border: 0;
color: #ffffff;
padding: 5px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
font-family: Times New Roman;
transition-duration: 0.5s;
}
.button_depression:hover {
background-color: #959595;
}
Simply use background for your hover; not background-color as illustrated in the snippet below:
.button_depression:hover {
background: #959595;
}
Brief summary:
background CSS property is a shorthand to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.
When working without the shorthand, the background-image property supersedes background-color and as such, setting background-color alone without abnegating it (background-image) will result in its precedence.
In other words, background-image: none; in combination with background-color: #959595; will work. (Refer to snippet below)
.button_depression:hover {
background-color: #959595;
background-image: none;
}
(background-image: unset; works well too, but can't tell if supported by all browsers)
Note that you can be achieved the same, using the background shorthand, simply as above, with background: #959595; (which I prefer: simple, less verbose, same result).
More details here ....
You can't see the button hover changing the background color due to the background image. You can set the button image to None on hover and then change the color. This might be what you want. Alternatively you can just set background to the background color you wanted. Your preference how you want to acomplish this.
.button_depression {
background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif) no-repeat;
border: 0px;
color: #ffffff;
padding: 5px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
font-family: Times New Roman;
transition-duration: 0.5s;
}
.button_depression:hover {
background: None;
background-color: #959595;
}
I've designed some hyperlinks with CSS to add a background image (to make it look like a button) using the following code:
<a class="btnImg" id="btnImgConfig" href="#"></a>
.btnImg {
width:100px;
height:100px;
display:inline-block;
border:1px solid #e4e4e4;
}
.btnImg:hover {
opacity: .2;
background-color: #878787;
}
#btnImgConfig {
background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
}
As you can see, I'm trying to create a darker effect on the image on hover. This is the desired effect:
However, currently the effect is this:
I know I could easily do this by replacing the image on hover with a darker version of it. But somehow I feel this shouldn't be the way to do it in this case. Besides what is mentioned above, I've also tried rgba{..} on hover. This however had no effect at all.
Here's a JSFiddle of the code above.
You could alternatively use a pseudo-element which then overlays. This will give you the effect you require.
.btnImg {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid #e4e4e4;
position: relative;
}
.btnImg:hover::after {
background-color: #878787;
opacity: 0.4;
position: absolute;
content: '';
width: 100%;
height: 100%;
}
#btnImgConfig {
background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
}
<a class="btnImg" id="btnImgConfig" href="#"></a>
Try this:
Change opacity: .2;to -webkit-filter: brightness(0.5);
Easiest approach would be to have the text and tools over a transparent background, and change the background color on hover. No opacity or other such. To make it work without "!important" define the background with background-image, and the color, position, and repeat likewise separately. Or, define the background-color with important (it's ok, it's prescriptive).
Put the image's initial opacity to .2, then put it to full opacity on hover.
.btnImg {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid #e4e4e4;
opacity: .2;
}
.btnImg:hover {
opacity: 1;
background-color: #878787;
}
#btnImgConfig {
background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
}
<a class="btnImg" id="btnImgConfig" href="#"></a>
What you show in the desired result is not really possible in the current setup..
If you are able to use a png24 file with a transparent background, you can accomplish this more easily, by just changing the background color.
#btnImgConfig {
background-image: url("https://cdn4.iconfinder.com/data/icons/ios7-line/512/Tools.png");
background-size:100%;
background-color: #eee;
}
.btnImg {
width:100px;
height:100px;
display:inline-block;
border:1px solid #e4e4e4;
}
#btnImgConfig.btnImg:hover {
background-color: #ddd;
}
See https://jsfiddle.net/zgurL5t9/ for an example.
Your image has a default background color which is causing this issue. try using a transparent PNG image instead along with the background-color property and you should be good to go.
I have updated your Fiddle link slightly for your reference:
JSfiddle
#btnImgConfig {
background: url("http://www.jar2exe.com/sites/default/files/images/pics/config-100.png") no-repeat scroll 0 0 #f8f8f8;
}
#btnImgConfig:hover{
background-color: #878787;
}
Note: I have used a different image of same size to make it easier for you.
Assuming you use a transparent png here.
You could create a different element within your a href.
<a id="btnImgConfig" href="#"><span class="btnImg"></span></a>
Keep the image on the link, but the background-color on the new element.
This way the opacity doesn't change the original background-img
CSS could be something like this.
.btnImg {
width:100px;
height:100px;
border:1px solid #e4e4e4;
position: absolute;
}
.btnImg:hover {
opacity: .2;
background-color: #878787;
}
#btnImgConfig {
background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
width:100px;
height:100px;
display: block;
}
I have a lot of forms on my website with, of course, many of the fields in them being required. If required field is left empty, it is assigned an 'error' class and I'm trying to circle the field in red regardless whether it is a text field, drop down menu or a checkbox.
I have the following code in my css file:
.error input, .error select, .error textarea {
border-style: solid;
border-color: #c00;
border-width: 2px;
}
Now strangely enough that works well in IE but in Chrome the checkboxes are not circled in red although I can see that the CSS is applied to them when inspecting the element.
And this might be irrelevant at the css code above is active but I do have something else in my css file:
input[type=checkbox] {
background:transparent;
border:0;
margin-top: 2px;
}
And that is used so that the checkboxes are displayed correctly in IE8 and less.
Any ideas how I can visualize the red border in Chrome?
EDIT:
Here's a jsfiddle:
http://jsfiddle.net/PCD6f/3/
Just do it like so (your selectors were wrong: .error input, .error select, .error textarea):
input[type=checkbox] {
outline: 2px solid #F00;
}
Here's the jsFiddle
Specifically for a checkbox use outline: 2px solid #F00;, BUT keep in mind that the border will still be visible. Styling input fields to look them well across multiple browsers is tricky and unreliable.
For a completely custom styled checkbox, see this jsFiddle from this Gist.
EDIT Play with: outline-offset: 10px;
Check Box, and Radio Button CSS Styling Border without any image or content. Just pure css.
JSFiddle Link here
input[type="radio"]:checked:before {
display: block;
height: 0.4em;
width: 0.4em;
position: relative;
left: 0.4em;
top: 0.4em;
background: #fff;
border-radius: 100%;
content: '';
}
/* checkbox checked */
input[type="checkbox"]:checked:before {
content: '';
display: block;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 4px;
margin-top: 1px;
}
Works for me.only outline doesn't work.
input[type=checkbox].has-error{
outline: 1px solid red !important;
}
In Play 2, there's a sample computer-database-jpa supporting the sorting of columns. By default it's sorted by computer, an arrow is indicating the sort order. I need this CSS style / arrow in another project, but even after examining the CSS code for this table header
<th class="name header headerSortDown">
Computer name
</th>>
I still can't see where the arrow is coming from? Any hint on this? Thanks!
Update:
One can browse the CSS here: https://github.com/playframework/Play20/tree/master/samples/java/computer-database-jpa/public/stylesheets
But on e.g. headerSortDown I can't find something that looks like an arrow ):
For a follow up question:
How to get the arrow directly next to the text?
The easiest way is to use inspection tool of your browser (ie FireBug in Firefox or built-in inspector in Chrome)
Here's standalone extract of the arrows, as you can see they are 'drawing' the arrows with CSS border (no image required)
<!DOCTYPE html>
<html>
<head>
<title>Arrows a'la Twitter Bootstrap</title>
<style type="text/css">
.header {
width: 200px;
background-color: #c2ccd1;
padding: 4px;
margin: 2px;
}
.header:after {
content: "";
float: right;
margin-top: 7px;
visibility: hidden;
}
.headerSortDown:after, .header:hover:after {
border-width: 0 4px 4px;
border-style: solid;
border-color: #000 transparent;
visibility: visible;
}
.headerSortUp:after {
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
visibility: visible;
}
</style>
</head>
<body>
<div class="header">Not selected</div>
<div class="header headerSortDown">Arrow up (sorting ASC)</div>
<div class="header headerSortUp">Arrow down (sorting DESC)</div>
</body>
</html>
And here's nice tutorial about drawing triangles with CSS border.
Edit
DIV tag uses a block display so it tries to use full width OR the width given in CSS style (in above sample it's 200px) if you'll use that arrow with some inline element like A or SPAN the arrow will be 'glued' to the text. Of course you can also force displaying DIV as an inline, the simplest way to do that (by modifying sample)
for .header declaration: remove width and add display: inline-block;:
.header {
/* width: 200px; don't set width anymore */
background-color: #c2ccd1;
padding: 4px;
margin: 2px;
display: inline-block; /* force displaying DIV as an inline element */
}
To control space between text and arrow just use margin-left property for .header:after part:
.header:after {
content: "";
float: right;
margin-top: 7px;
visibility: hidden;
margin-left:4px; /* space between text and arrow for inline elements */
}
OR if you want to preserve a space for the arrow in the inline elements (to avoid width changes on hover) - you can also add transparent 'arrow'
.header:after {
content: "";
float: right;
margin-top: 7px;
visibility: visible; /* make it visible by default */
margin-left:4px; /* space between text and arrow for inline elements */
border: 4px solid transparent; /* set borders to transparent, so they won't show */
}