When I set a pre element to contenteditable and put focus in it for editing, it receives a dotted border around it that doesn't look very nice. The border isn't there when focus is somewhere else.
How do I remove that border?
Thanks
Set the outline property to 0px solid transparent;. You might have to set it on the :focus state as well, for example:
[contenteditable]:focus {
outline: 0px solid transparent;
}
You can also add the :read-write pseudo-class to style elements that are editable.
For instance (jsFiddle):
.element:read-write:focus {
outline: none;
}
Read more here on codrops.
The :read-write pseudo-class selector is supported in Chrome, Safari, and Opera 14+, and on iOS.
It is supported with the -moz- prefix in Firefox in the form :-moz-read-write.
The :read-write selector is not supported in Internet Explorer and on Android.
Never remove built-in focus styles without providing a replacement, this feature is essential for millions of people who are using the web without a mouse.
An example of good advice on this topic from the HTML Living Standard (
https://html.spec.whatwg.org/multipage/interaction.html#element-level-focus-apis):
[in order to hide the focus ring] use the :focus-visible pseudo-class to override the 'outline' property, and provide a different way to show what element is focused. Be aware that if an alternative focusing style isn't made available, the page will be significantly less usable for people who primarily navigate pages using a keyboard, or those with reduced vision who use focus outlines to help them navigate the page.
For example, to hide the outline from textarea elements and instead use a yellow background to indicate focus, you could use:
textarea:focus-visible { outline: none; background: yellow; color: black; }
Related
When autofilled, my input elements have a browser default style that I want to change. However, the browser styles all use !important and I can't seem to override them, even with a more specific selector that also uses !important. I think the exact styles that are causing the problem are these ones:
Screenshot of styles from dev tools
Is there a way to override them, either with CSS or JavaScript? I'm certain that I've seen input elements with custom autofill styles before. In case that's important - even though I want the override to work in all browsers anyways - I'm currently using Brave, which runs on Chromium, so selectors etc. should be the same that work for Chrome.
You don't need Javascript to solve this, and as a rule of thumb, you should use as less JS to manipulate your CSS as possible,
you can use the -webkit-autofill pseudo-selector to target those fields and style them as you see fit. The default styling only affects the background colour, but most other properties apply here, such as border and font-size. You can even change the colour of the text using -webkit-text-fill-colour, which is included in the snippet below.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid green;
-webkit-text-fill-color: green;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
transition: background-color 5000s ease-in-out 0s;
}
** note that this snippet is just an example that I had in handy; you can use it in many ways! **
I was working with refs in react. I noticed that the .focus() method is not consistent in chrome and firefox.
In this sandbox https://codesandbox.io/s/a-guide-to-react-refs-2nd-example-vl9sj?file=/src/Ref.js
I have created a lot of input fields and there is ref in the first input field. When the user clicks the submit button i call the .focus() method on the input ref.
And as you can see in the picture below.
Left pic-> firefox
Right pix-> Chrome
As you see chrome adds certain space above it when it focus but firefox does not. This is the same behaviour show in IE.
Is there any way to have consistent behaviour in both of them. Or is there anything else I can do except for focus to get the focus behaviour?
Edit in IE:
.focus {
outline: #015ecc solid 2px;
outline-offset: -2px; // You don't always need to provide offset. But in some scenarios you might need to provide outline offset as it's not default offset property.
::-ms-focus-inner { //FF adds some inner border to the elements, this will remove it.
border: 0;
}
}
Yes you'll get different behaviour in different browsers when you focus.
Chrome uses webkit-focus-ring
In Element section when you focus the element you can see something like this,
outline: webkit-focus-ring-color auto 2px;
In FF, this outline will be different.
So in order to have same consistent behaviour for focus in multiple browsers, you need to mention your outline behaviour.
In your css you have to do something like below,
.focus {
outline: #015ecc solid 2px;
outline-offset: -2px; // You don't always need to provide offset. But in some scenarios you might need to provide outline offset as it's not default offset property.
::-moz-focus-inner { //FF adds some inner border to the elements, this will remove it.
border: 0;
}
}
So by adding the above CSS, you will get consistent behaviour in all browsers on focus. There may be chances that depending upon your usecase you need to add this CSS with pseudo selectors such as ::after, ::before.
Adding screenshot from your sandbox link for more clarity,
Hope it helps!!!
I would like to learn more about the "HTML contenteditable =' true '" attribute and the javascript focus () function.
For example, I would like to know how I can influence the position of the focused line or how to edit the background of a focused line.
I have already googled some things but I can't find the right information.
Does anyone have a good tip?
You can check which element is on focus by writing in the Google Chrome console:
document.activeElement
The contenteditable attribute specifies whether the content of an element is editable or not.
If you want to trigger the focus on a contenteditable element you can do it by:
$(".contenteditableClassName").focus();
Any other background change on this element is done by CSS for example you can use
.no-touchevents &:hover, &:focus, &:active {
border-color: white;
color: blue;
You can apply different changes on the element on focus this way.
Also you can remove the focus border on click by using:
.pointer-focus &:focus {
outline: none;
}
As far as I can tell, there's no solution for getting consistent padding-left within select boxes (dropdowns) across all modern browsers.
<select class="dropdown">
<option>Planes</option>
<option>Trains</option>
<option>Automobiles</option>
</select>
The solution I've heard is to use text-indent, but that breaks entirely in Firefox, let alone is supported sporadically across other browsers. If you use a combination, you actually get completely different results across all major browsers.
.dropdown {
padding-left: 10px;
text-indent: 10px;
}
IE: only padding renders
Chrome: both render
Safari: only text-indent renders
Firefox: padding, with weird text-indent bug
Is there another way to resolve this issue? It seems like the best approach is to ditch text-indent and try and figure out a way to indent in Safari without it, since everything else can handle the padding just fine.
Relevant Fiddle: http://jsfiddle.net/s3Lrh/1/
Trust me, there is no good way to do this. Styling select boxes has always been buggy, with limited support.
Since you can use jQuery, I would suggest something like Select2 or Chosen, which both can style your select box by including a "fake" select box, while hiding the real one.
Here is the best thing that I have found to work:
select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-left: 10px;
}
At the time of writing, this works on Chrome, Safari, and Firefox.
The only way I made this work without using a select plugin is to add empty spaces before the text like this:
<option> Some Text Here</option>
This will have similar effect to padding-left
You'll have to approach this in a different way. This is what you should do:
option
{
position: relative;
padding-left: 5px; /*or whatever*/
}
This is a universal approach, and it gets the job done.
I have this in my CSS file that styles input fields in a form:
input,textarea,input,select,input,checkbox {
font-size:12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
color:#98925C;
background-color:#000;
border:1px solid #413E22;
}
When I use a disabled on the form though (eg the submit button when pressed), it doesn't grey out like it should.
I have this in the submit button HTML
onclick="this.disabled=true;this.value=' done ';this.form.submit();"
How can i make it so the button greys out once clicked?
It does gray out in IE. For other browsers, though, you need to specifically define your "disabled element" styles with:
:disabled {
color: #6b849a;
text-shadow: 1px 1px #ffffff;
cursor: default;
}
Something like that (although you may have to apply !important if there are cascading issues).
The issue is that your styles are overriding the browser defaults for a disabled form element.
You need to redefine the styles by specifying :disabled pseudoclass in your CSS.
Here's a jsFiddle that shows how it works.
input[disabled]{
styles here
}
Use the :disabled pseudoclass. This might not work in older browsers and will surely not work in IE, so you could also add a normal class to the form when disabling it.