1) Is there a way to completely hide the IE scrollbar on textareas? (I'm primarily concerned with IE8) overflow: hidden or auto don't seem to work.
2) Is there a way to stop safari and chrome from "highlighting" focused form elements?
3) Is there a way to disable resizing of textareas?
overflow:hidden;
outline: none; (on the :focus pseudo-class of the element)
resize: none;
If worse comes to worst, you can absolute position a div on top of the scrollbar to hide it.
Related
I have this style inside a PHP file that is applied to an Element
line-height: 120px;
display: list-item;
display: -moz-inline;
list-style: none;
I want that if browser is Chrome then display:list-item and if it is Mozilla then display: inline
The above style works well in Chrome, but in Mozilla it is applied as display: list-item
How to apply specific CSS rules to Chrome only?
Here's a bunch of methods, that actually can help you. Just set style for mozilla and then overwrite it by the Chrome hack. But abstracting from that solution: maybe show us some bigger part of code (or even jsfiddle) so we can help you style it properly without any hacks.
On a page I am having a webkit scrollbar which has been hidden using display: none css property.
#element::-webkit-scrollbar {
display: none;
}
In one of my app level css files I tried to override the above css rule, but I wasn't able to display the scrollbar
I tried changing the css but I couldn't the get exact scrollbar which would have been there if display: none property was not present.
#element::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
display: block;
}
#element::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
The above css made the scroll bar visible but it gave me ugly scroll bar (probably due the css rules I have used).
Is there a simple way in which I can display the webkit scrollbar which would been there if the display:none property was not present.
I can not change the display:none as it is being inherited by my app.
I can only over-ride that rule.
EDIT:
An exactly similar question was asked How to override "::-webkit-scrollbar" CSS rule and make scrollbar visible again, but it seems that also doesn't have an accepted answer.
Edit: Does not seem to work, as pointed out in the comments.
I was able to restore the scrollbars using
#element::-webkit-scrollbar {
display: unset;
}
If the display:none is what it's hiding it why don't you just overwrite the display instead of adding that other properties?
Try overwriting the display with the different values it can has:
https://developer.mozilla.org/en-US/docs/Web/CSS/display
you can do something like this
*:not(.excluded-element)::-webkit-scrollbar { display: none; }
reads as: apply it to everything except the .excluded-element
I have made a div tabbable with the tabindex attribute to make hidden content accessible.
Currently when clicked with the mouse the div gets browser :focus styling.
Is there a way to have that tabbable element to only have focus styling when accessed via the keyboard? An anchor element has this by default.
Div with tabindex='0' gets browser focus styles on mouse and keyboard
interaction
Anchor gets browser focus styles on keyboard interaction
only
I would like the div to emulate the anchor. Making it an anchor is not an option though unfortunately.
Any help would be great, I'm genuinely at a loss.
Edit -> Here is an example: http://jsfiddle.net/LvXyL/2/
Sure just add the :focus pseudo-class to the div, and style. I recommend using outline vs border. I updated the fiddle.
div:focus {outline: blue solid 2px;}
Kub suggested a JS solution, but why use js if you don't actually need to?
I've had great success using javascript to add/remove a class to the body that indicates if the user is using a mouse or a keyboard. Use those classes to style your focus states as you desire.
document.addEventListener("mousedown", () => {
document.body.classList.add("using-mouse")
document.body.classList.remove("using-keyboard")
})
document.addEventListener("keydown", () => {
document.body.classList.add("using-keyboard")
document.body.classList.remove("using-mouse")
})
The in the css you can do something like:
.using-mouse :focus {
outline: none;
}
.using-keyboard :focus {
outline: auto 5px blue;
}
I would suggest to don't be specific on tags like div, p, span
let's write one common selector to achieve this functionality for all the elements.
*:focus {
outline: blue solid 2px;
}
If you want to be specific then I would suggest this one.
*[tabindex]:focus {
outline: 2px green solid;
}
I have used the focus-visible css selector to apply different styles for keyboard focus and mouse click.
The way I implemented it is like this:
.your-element's-classname:focus:not(:focus-visible) { outline: none; }
When you focus it with the keyboard you will see the browser's focus styling or the custom styling you have made for your element, and when you click it you will see no styling because I have applied outline:none which removes the outline created by the browser's focus styling.
You can find more information in Mozilla's focus-visible docs and Chromium's browser focus article.
For those who are looking to override the tabindex focus style and preserve the original functionality of tabindex ie. show outline only when tab key is pressed and not on mouse click like if
:focus {
outline: 2px solid lime;
}
is used it will show outline on every element that is getting focus, but I found out that if I use
Change Tabindex Style - for all elements:
:focus-visible {
outline: 2px solid lime;
}
this will override the outline style of the tabindex on focus and preserve the tab outline functionality but with the new outline style.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
If you can use javascript, try use onclick attribute.
onclick="this.blur()" for lost focus
onclick="this.focus()" for set focus
Example where DIV on click lost focus and A is set focus http://jsfiddle.net/LvXyL/6/
Disadvantage is visible focus style if you hold mouse key for a longer time.
I have a simple div that if clicked to much turns blue: JsFiddle
In Chrome its worse, the whole div(30x30px + some other surounding elements) turns blue. Is there anything I can do about this (other than using img)?
Sorry for asking, but isn't this just you marking it by double-clicking it? The "blue" highlight effect would be the normal behaviour in all browsers...
If you do not want this behavior, you should make sure it is not selectable by applying styles:
-moz-user-select: none;
-webkit-user-select: none;
Updated:
For Internet Explorer, use the unselectable tag on your div:
<div class="right" unselectable="on">»</div>
This CSS will do the trick:
div::selection {
display:none;
}
It sets the selection (highlight) to display:none, so you don't see it.
http://testing.ipalaces.org/ looks different in IE9 where the 2nd LI in sub-navigation makes the top border. It seems the width it's at now works for every major browser but IE9. If I set it to exactly 3px less, it works good in IE9.
Is this a known bug? can I get around this without doing a conditional IE9 CSS call?
The problem is that without an explicit width, #sub-navigation li.selected renders a few pixels wider in IE 9 because of font rendering, interrupting the next floated element. Forcing a width will fix it.
Also, Verdana in bold renders relatively wide so you should consider dropping it from the font-stack.
#sub-navigation li { font:700 16px/1 geneva, sans-serif; }
#sub-navigation li.selected { width:105px; }
How about text-overflow?
+css:
#sub-navigation li span {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
Try this, anyway I don't have IE (Mac rulz) but in my workplace we usually optimize sites for IE too. I'll check it tomorrow if this is not going to work.
Can I ask, why do you have all the dropdowns featured as a nested list inside the last <li> in the navigation?
If it was me, I'd have each dropdown inside it's own list, as a sub-item fo the parent link.
This way, you can inherit the horizontal boundaries of the drop-down item for the parent-item, and it should be more straightforward to match widths.
Also, the code will read more logically, and expand more easily in future.
You should set a fixed width to all your li's for the submenu depending on the number you want. right now the first list element should be set to width: 107px.
to test it, just add style="width:107px" to <li class="selected">
Good luck :)