I have many SELECT elements on a page, the problem is that in IE11 they have an outline which I try to remove it using CSS :
select{outline:none;}
It works fine as long as , it is the only style element! As soon as I add more style e.g background-color to SELECT, the outline:none does not work anymore!
It should work in IE and for SELECT element. However in other browser, there is no outline applied to element by default.
thanks in advance
By using a bit CSS you can get same style across all browser.
Check the DEMO.
select{
outline:none;
border:1px solid #E4E4E4;
padding:10px;
width:200px;
background: none repeat scroll 0 0 #F7F7F7;
}
Related
I am using contenteditable on my web pages. This works fine but the browser puts an ugly border around the editable section when it is activated. Also, some of these borders are not erased when the focus is changed to another element on the page.
Safari creates a light blue border, Firefox uses a thin black line, so there is some browser interpretation at work here.
I have tried explicitly setting the border on the editable sections to none and making that CSS property important, but this does not change the browser's behavior.
My question:
Is there a way to influence the styling of the page element that overrules the border property when the user has clicked inside it to start editing?
Add this style (JsFiddle):
[contenteditable="true"]:active, [contenteditable="true"]:focus
{
border:none;
outline:none;
}
To let all contenteditable elements not use border and outline when focuesed.
EDIT: I found an excellent tutorial
Try adding outline:none in css for the form elements to remove the border highlight property outline:none in css for input elements.
For example:
input:focus{
outline:none;
}
textarea:focus{
outline:none;
}
select:focus{
outline:none;
}
For working code find the Jsfiddle link
[contenteditable="true"]:active,
[contenteditable="true"]:focus
{
border:none !important;
outline:none !important;
}
In my site, every post has a bottom border. I've applied a
article:last-child {border-bottom:none;}
so that the last post doesn't have a border at the bottom, but it's still showing.
What am I doing wrong?
last-child will fail if you have any element other than article so use last-of-type instead.
Because the last-child is nav on your website, CSS will look for last article child but the last child is nav hence the selector goes wrong.
Where on the other hand last-of-type will select the last article element of it's parent.
Use this instead and it will work for sure
.content-pad-left article:last-of-type {
border-bottom:none;
}
last-child is not available in IE 8. article tag can be still solved by using modernizr.
To make backward compatible, you want to use first-child -
article { border-top: 1px solid #eee; }
article:first-child { border-top: none;}
This is what your current website look like in IE 8.
How do you avoid the annoying grey background that IE 10 applies to anchors when you click them?
There is actually a really easy CSS fix. IE 10 changes the background-color of anchor tags when they are in the :active state. To stop it from happening or to change the colour you can use the CSS rule below.
a:active{
background-color: transparent; /* Can be any colour, not just transparent */
}
Live demo: http://jsfiddle.net/tw16/NtjK7/
On a side note, it's worth mentioning that when styling links you need to ensure that you write the rules in the correct order to ensure that previous styles don't get overwritten:
a:link{} /* 1st */
a:visited{} /* 2nd */
a:hover{} /* 3rd */
a:active{} /* 4th */
I found it was actually :focus that added the grey background.
this worked for me:
a:focus {
background-color: transparent;
}
I haven't been able to find many information but I did found one fix:
Wrap the text of the anchor in a span
Working Solution
If you don't want to change every anchor in your HTML you can use a script like this one:
$("a:not(.dont-use-span)").each(function() {
$(this).html("<span>" + $(this).html() + "</span>");
});
Working solution
Note: just add the class dont-use-span to the anchors that you don't want to modify
After many unfructuous tests, I finally made it works with this :
a {color:#fff; background-color:#f77927 !important;}
a:hover {color:#fff; background-color:#e65e06 !important;}
a.active {color:#fff; background-color:#e65e06 !important;}
a.focus {color:#fff; background-color:#e65e06 !important;}
See in action
I want a items that have the tag class to be grayed (with a rounded border) when the mouse moves over and when the item(s) are clicked.
A sample item might look like this <span class="tag">Some value</span>
I was hoping this would give the desired result, (tag:hover works as hoped, but tag:active doesn't):
.tag{
}
.tag:hover{
background:#CCC;
padding:4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tag:active{
background:#CCC;
padding:4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
You can use jQuery to permanently add a class to your span. You could do it like this:
.tag:hover, .tag.everclicked{
background:#CCC;
padding:4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
And in jQuery:
$(document).ready(function()
{
$('.tag').click(function()
{
$(this).addClass('everclicked');
});
});
http://jsfiddle.net/r4gQQ/2/
You have the same CSS styles defined for both pseudo-classes. An :active element will usually have :hover too (depending on the browser), as it is applied whilst the mouse button is down on the element.
If you want the styles to stay applied when you've clicked and moved away from the element, you'll need to use JavaScript or, alternatively, give the element a tabindex attribute and use the :focus pseudo-class. Using #Marnix's test case, for example, http://jsfiddle.net/r4gQQ/1/.
First things first, the CSS for your :hover and :active states is identical, so you'll not see any change!
According to the specs for CSS on w3.org, :active used to only apply to hyperlinks in CSS1, but that's no longer the case. I couldn't find any explicit statement regarding what elements it works for now, so I'm just going to assume it works everywhere unless someone else knows better. It could be that it still only applies to elements the user is meant to "activate" by clicking, such as links and form buttons.
If :active does indeed apply to any kind of element now, then the above CSS should work as you want, provided you change the :active style to be different from the :hover style of course!
If it doesn't, then either there are still restrictions in CSS as to where you can use hover, or there's a bug in the CSS engine of your browser that restricts where you can apply the :active style in a way that goes against the current CSS specs. If the latter is the case, then you could use javascript to add a class on mousedown to the clicked element and remove it again on mouseup or mouseout. You can then style the active class in CSS as normal.
here is the page : http://pfibco.ca/01-accueil-fra.php
I try to block hover highlight the menu... work almost fine
just the selected class dont apply... why ?
#menu ul li a .selected{
and the worst... the menu is completely destroy in ie6, why ?
i used the block propriety.. no choice for the hover...
display: block;
how to fix that ?
Try this for the selected problem:
#menu ul li.selected a {
The HTML has the selected class on the <li> so the CSS should match that.
I can't help you with IE6 though, it destroys a lot of things and my nerves are one of those things.
Answer for your IE 6 issues:
Each menu li tag seems having a style rule for line-height : 15.76pt, which is not found in other browsers. I guess IE6 incorrectly inherit the style from ancestor tag, maybe you can check you CSS file.
The border doesn't seem to work in each link, you can try to apply the border to its parent li tag instead of the anchor itself.
If you got hurry, you can use a litle hack for IE6 ( I'm got red now =X ).
/* hack for IE6 */
* html #menu ul li {
border: 1px solid #BFAF98;
border-top: none;
}
I think it's works fine.