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;
}
Related
I am using a bootstrap 3.3.7 button, and want the button to stay the same color when a mouse focuses, hovers, or clicks on it.
<button class="btn btn-default delete-btn">Delete</button>
Here is where I modify the background-color for my CSS selectors:
.delete-btn:hover, .delete-btn:focus, .delete-btn:active {
background-color: white;
}
This works just fine for a focus or hover event.
However, when the mouse clicks on the button, it changes to it's default grey color. Any ideas what I am missing here? Scratching my head...
The Bootstrap stylesheet has this set of selectors:
.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover
.btn-default:active:focus and .btn-default:active:hover are more specific than selectors with only one pseudo-class.
You need to make your selector equally specific:
.delete-btn:hover, .delete-btn:focus,
.delete-btn:active:hover, .delete-btn:active:focus, {
background-color: white;
}
Try the selector .btn.btn-default.delete-btn instread of only .delete-btn and use important.
.btn.btn-default.delete-btn:hover, .btn.btn-default.delete-btn:focus, .btn.btn-default.delete-btn:active {
background-color: white !important;
}
Else, Inspect element on your browser to find the grey color and replace the whole css rule with white color.
Else, check if there is something wrong going on in your javascript and replace your color rule with click event.
Try add important at the end of code like this:background-color: white!important; .
use !important in your styles to replace default styles of bootstrap
Add !important after your css attributes which replace bootstrap default css with yours and give priority to your css For avoiding box shadow use box-shadow. Add This Css:---
.delete-btn:hover, .delete-btn:focus, .delete-btn:active {
background-color: white !important;
box-shadow: none !important;
}
Let's say if we go to Bootstrap's pagination section and moved that sample into our sample page, with no JavaScript whatsoever.
I think the "hover" and get grey background effect, as well as the "click" and grey background effect, is done by something like this, which I add to my page as well:
.pagination li a:focus { background: #fa6 !important }
.pagination li a:hover { background: #fa6 !important }
However, I don't know why when I inspect that <a> element on Google Chrome or Firefox's debugger, I do not see the CSS rule come into view, and also, I do not see the "computed value" of CSS showing a different value -- all it shows is #ffffff for white.
I thought I did see the :hover or :focus being listed in the CSS rules before (and the computed value will change as well in the past). What is happening and can we see that as before?
Bootstrap specifically target a to design it. You have to override the bootstrap by this way-
.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover
{
background: #fa6
}
I have a question on accessibility on a postchat survey window which I've worked on.There's a close button on the top right(as an image of X) where I've included visual focus by putting focus pseudo class, now the problem i'm facing is that the close button has white border around it when it is focused and this is happening as expected in chrome, Mozilla but in IE a blue border is coming. Can someone help me how to remove this blue border and bring white in its place?
I'm sharing the code snippet where I've used focus
a.close-link:focus {
outline: 1px dotted white;
}
Though active and focus are to different states but you can try both at same time for your purpose i think
:active Adds a style to an element that is activated
:focus Adds a style to an element that has keyboard input focus
:hover Adds a style to an element when you mouse over it
:lang Adds a style to an element with a specific lang attribute
:link Adds a style to an unvisited link
:visited Adds a style to a visited link
following source http://www.w3schools.com/CSS/css_pseudo_classes.asp
a.close-link:focus, a.close-link:active {
outline: 1px dotted white;
}
:FOCUS pseudo-class does work in IE, Instead, I believe your problem is with outline property.
Try this:
IE 9
George Langley wrote in to say that IE 9 apparently doesn't allow you
to remove the dotted outline around links unless you include this meta
tag:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
((source))
Well i've found out a workaround. For IE9 border comes by default so I've removed border now and the blue outline is no more there!
a.close-link:focus {
outline: 1px dotted white;
}
a.close-link img {
border: none;
}
Ive styled the :active state of a link already but when you click it in Chrome you get a blue outline as you can see in the 2nd button below:
How can I disable this styling, ideally for all browsers?
Adding outline: 0; to the CSS does the trick for form elements and buttons.
I believe what you are looking for is the CSS property outline.
For Example
a {
outline: none;
}
a { border: 0 }
You should edit the anchor tag's global CSS, not just for its active state. Also, look into modernizr.
Why does the CSS3 pseudo-element selection not change all parts of the highlight? As you can see in this screenshot I have selected part of the page, and parts of the selection are the default bright blue color:
This is the CSS that I'm using, it is at the top of my CSS file:
::selection { background: #3B3B3B; color: #fff; }
::-moz-selection { background: #3B3B3B; color: #fff; }
It seems like the highlight for inputs (text, checkboxes, etc.) and white space does not change. Does anyone know why this is, and is there a way to change it for every part of the page so the highlight color is consistent? I'm using Chrome.
The ::selection pseudo-element doesn't work properly in Chrome/Safari. <input> elements will be the standard highlight color. It's a very old and still outstanding bug:
https://bugs.webkit.org/show_bug.cgi?id=38943
The only workaround I've been able to come up with is using contenteditable elements instead of <input> elements.
Here's a demo I created: http://jsfiddle.net/ThinkingStiff/FcCgA/
And a post I wrote about it: https://stackoverflow.com/a/8529323/918414