Now use this code (and many variations of this), but scroll track get dark-grey color, something like #222222 or near this. Find many examples, but all of them give same result. Opera, Chrome and Firefox show this bug. How to fix?
#style-3::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: transparent;
}
#style-3::-webkit-scrollbar {
width: 6px;
background-color: transparent;
}
#style-3::-webkit-scrollbar-thumb {
background-color: #000000;
}
Edit:
The solution that I gave with overflow: overlay still works in browsers like Google Chrome and you can still see my answer below. However, overflow: overlay was marked depreciated.
Whether an alternative solution exists, is unknown, but the one mentioned below still works for Google Chrome.
From what I understood from https://github.com/w3c/csswg-drafts, is that the alternative was ment to be scrollbar-gutter. But there's actually nothing pointing towards an alternative solution, except people saying that there would be.
The documention of scrollbar-gutter says, that the user agent is able to control whether it shows classic or overlay scrollbars. And the people at the csswg-drafts say that the people that would implement such a feature, don't seem to be interested into it.
If we want an alternative solution, then we have to tell them, here: https://github.com/w3c/csswg-drafts/issues/7716
I can't suggest this alone, they need more people that would be interested in having a "feature" to let the website author control whether a classic or a overlay scrollbar should be used.
Regarding Google Chrome's overlay scrollbars. They've made an experiment that allows the user to enable it at chrome://flags/ and then searching for "Overlay Scrollbars".
Answer:
If you use this for "body":
body {
overflow: overlay;
}
The scrollbar will then also take transparent backgrounds across the page.
This will also put the scrollbar inside the page instead of removing some of the width to put in the scrollbar.
Here is a demo code. I wasn't able to put it inside any of the codepen or jsfiddle, apparently it took me a while until I figured out, but they don't show the transparency, and I don't know why.
But putting this in a HTML file should go fine.
Was able to put it on fiddle: https://jsfiddle.net/3awLgj5v/
<!DOCTYPE html>
<html>
<style>
html, body {
margin: 0;
padding: 0;
}
body {
overflow: overlay;
}
.div1 {
background: grey;
margin-top: 200px;
margin-bottom: 20px;
height: 20px;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: rgba(90, 90, 90);
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
}
</style>
<body>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>
Best way to test it is to create a local html file, I guess.
You can also apply that on other elements, such as any scrolling box. While using inspector mode, it could be that you have to put the overflow to hidden and then back to anything else. It probably needed to refresh. After that it should be possible working on scrollbar without having to refresh it again. Just note that was for the inspector mode.
With pure css it is not possible to make it transparent. You have to use transparent background image like this:
::-webkit-scrollbar-track-piece:start {
background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}
::-webkit-scrollbar-track-piece:end {
background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}
.scrollable-content {
overflow-x:hidden;
overflow-y:scroll; // manage scrollbar content overflow settings
}
.scrollable-content::-webkit-scrollbar {
width:30px; // manage scrollbar width here
}
.scrollable-content::-webkit-scrollbar * {
background:transparent; // manage scrollbar background color here
}
.scrollable-content::-webkit-scrollbar-thumb {
background:rgba(255,0,0,0.1) !important; // manage scrollbar thumb background color here
}
Embed this code in your css.
::-webkit-scrollbar {
width: 0px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: none;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: white;
-webkit-box-shadow: none;
}
::-webkit-scrollbar-thumb:window-inactive {
background: none;
}
Only this code worked for me tho -
<!DOCTYPE html>
<html>
<style>
body {
overflow: overlay;
}
::-webkit-scrollbar {
width: 10px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: white;
border-radius: 2px;
}
</style>
<body>
..Your code here
</body>
</html>
The standard way to do this (which currently only works in Firefox) is:
:root {
scrollbar-color: transparent transparent;
}
Just set display:none; as an attribute in your stylesheet ;)
It's way better than loading pictures for nothing.
body::-webkit-scrollbar {
width: 9px;
height: 9px;
}
body::-webkit-scrollbar-button:start:decrement,
body::-webkit-scrollbar-button:end:increment {
display: block;
height: 0;
background-color: transparent;
}
body::-webkit-scrollbar-track-piece {
background-color: #ffffff;
opacity: 0.2;
/* Here */
display: none;
-webkit-border-radius: 0;
-webkit-border-bottom-right-radius: 14px;
-webkit-border-bottom-left-radius: 14px;
}
body::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #333333;
-webkit-border-radius: 8px;
}
Try this one, it works fine for me.
In CSS:
::-webkit-scrollbar
{
width: 0px;
}
::-webkit-scrollbar-track-piece
{
background-color: transparent;
-webkit-border-radius: 6px;
}
and here is the working demo:
https://jsfiddle.net/qpvnecz5/
To control the background-color of the scrollbar, you need to target the primary element, instead of -track.
::-webkit-scrollbar {
background-color: blue;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
I haven't succeeded in rendering it transparent, but I did manage to set its color.
Since this is limited to webkit, it is still preferable to use JS with a polyfill:
CSS customized scroll bar in div
if you don't have any content with 100% width, you can set the background color of the track to the same color of the body's background
It might be too late, but still. For those who have not been helped by any method I suggest making custom scrollbar bar in pure javascript.
For a start, disable the standard scrollbar in style.css
::-webkit-scrollbar{
width: 0;
}
Now let's create the scrollbar container and the scrollbar itself
<!DOCTYPE HTML>
<html lang="ru">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
...meta
</head>
<body id="body">
<div class="custom_scroll">
<div id="scroll_block" class="scroll_block"></div>
</div>
...content
<script src="main.js"></script>
<script>customScroll();</script>
</body>
</html>
at the same time, we will connect the customScroll() function, and create it in the file main.js
function customScroll() {
let scrollBlock = document.getElementById("scroll_block");
let body = document.getElementById("body");
let screenSize = screen.height - scrollBlock.offsetHeight;
document.addEventListener("scroll", () => {
scrollBlock.style.top = (window.pageYOffset / body.offsetHeight * (screenSize + (screenSize * (body.offsetHeight - (body.offsetHeight - screen.height)) / (body.offsetHeight - screen.height)) )) + "px";
});
setScroll(scrollBlock, body);
}
function setScroll(scrollBlock, body) {
let newPos = 0, lastPos = 0;
scrollBlock.onmousedown = onScrollSet;
scrollBlock.onselectstart = () => {return false;};
function onScrollSet(e) {
e = e || window.event;
lastPos = e.clientY;
document.onmouseup = stopScroll;
document.onmousemove = moveScroll;
return false;
}
function moveScroll(e) {
e = e || window.event;
newPos = lastPos - e.clientY;
lastPos = e.clientY;
if(scrollBlock.offsetTop - newPos >= 0 && scrollBlock.offsetTop - newPos <= Math.ceil(screen.height - scrollBlock.offsetHeight)) {
window.scrollBy(0, -newPos / screen.height * body.offsetHeight);
}
}
function stopScroll() {
document.onmouseup = null;
document.onmousemove = null;
}
}
adding styles for the scrollbar
.custom_scroll{
width: 0.5vw;
height: 100%;
position: fixed;
right: 0;
z-index: 100;
}
.scroll_block{
width: 0.5vw;
height: 20vh;
background-color: #ffffff;
z-index: 101;
position: absolute;
border-radius: 4px;
}
Done!
I was able to get a transparent background, and transparent scroll bar like this:
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar {
width: 12px;
background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: rgba(33, 37, 41, 0.45); // change 0.45 to 0 to make it invisible
}
Also you can add this to your body element, to display your scroll bar above the website content:
overflow: overlay;
Related
I want to achieve this:
What I already achieve:https://plnkr.co/edit/a3XfJo6Fxtru9V5zpVYR?p=preview
.dropdown-menu { //container
overflow-y: overlay;
background-color: transparent;
}
.dropdown-menu::-webkit-scrollbar {
width:10px;
}
.dropdown-menu::-webkit-scrollbar * {
background:transparent;
}
.dropdown-menu::-webkit-scrollbar-thumb {
background:$blue !important;
border-radius: 6px;
}
Does someone have any ideas how I can do that? How can I make the items stay between their container and the container's scrollbar so they looks like the design?
I tried putting z-index in the elements but seems not to work.
Just switch the unit in body tag from % to vw
and you will get the over content effect.
body {
width: 100vw;
overflow-x: hidden;
}
body::-webkit-scrollbar {
width: 0.7em;
background: transparent;
}
body::-webkit-scrollbar-thumb {
background: #c0392b;
}
http://manos.malihu.gr/jquery-custom-content-scroller/
This plugin works pretty well. Suggested! Easy to modify as well!
Make some changes in your css file use this code
.dropdown-menu::-webkit-scrollbar-track {
background-color: #E0E0E0;
}
remember to remove display: none; property from your code or change it to display: block;
Thank you in advance for your help.
I have spent a good deal of time scouring the web and this forum for a solution to having a diagonal angled bottom to my navigation buttons. Here is an example:
I want to avoid using images if possible. I'm wondering how to create a box like this in the example image for each navigation choice with CSS. This navigation code will make its way into a Wordpress install. I really appreciate the expertise. Thank you again!
So good-news, bad-news...
This can be most-of-the-way done using nothing but CSS.
For sufficiently-new browsers (ie: you don't require IE<=8 to maintain all styles that Chrome 42 has) this can be done without using extra DOM elements.
This can also be done using just CSS ...wait for it...
buuuut the CSS-only version can only make the angle a set width.
It can't make the angle stretch across an arbitrary width, so either the buttons have to be the same length, or the width/height of the angle has to be the same on all buttons (meaning part of the bottom will be flat, on longer buttons).
CSS-only Solution (good enough?)
nav {
background-color: green;
padding: 20px;
}
nav > button {
background-color: rgb(60, 60, 60);
color: rgb(120, 120, 120);
position: relative;
border-radius: none;
border: none;
padding: 20px;
}
nav > button:after {
content: "";
width: 0;
height: 0;
right: 0;
bottom: 0;
position: absolute;
border-left: 60px solid transparent;
border-bottom: 15px solid blue;
}
<nav >
<button >About</button>
<button >Bios</button>
</nav>
I made the colours obvious for a reason.
For the full experience of the cheat, I'll make the solution a little more obvious, by changing the colour of the left border:
Behind the Scenes Look
nav {
background-color: green;
padding: 20px;
}
nav > button {
background-color: rgb(60, 60, 60);
color: rgb(120, 120, 120);
position: relative;
border-radius: none;
border: none;
padding: 20px;
}
nav > button:after {
content: "";
width: 0;
height: 0;
right: 0;
bottom: 0;
position: absolute;
border-left: 60px solid red;
border-bottom: 15px solid blue;
}
<nav >
<button >About</button>
<button >Bios</button>
</nav>
As you can see, the triangle that I created using the border-bottom (in blue) and border-left (transparent) is just about perfect.
The width of the border-left determines the width of this effect, and the height of the border-bottom determines the height; it just happens that the left one is invisible.
If that blue were set to the same green as the <nav> itself, then it would look like a notch was missing from the button, rather than having a corner painted over.
If you wanted to make this ES6-8 friendly, you'd just add 1 div per button (after each button or whatever), and size that and use its borders.
Really, you'd need to add a div to contain the div and the button, as well (so the container was relatively positioned, the button took up 100% of its space, and the paint-chip was absolutely positioned inside).
If you don't care about old browsers getting the exact same view, you really don't need to do this to yourself.
That's most of the way solved...
If you can say "My theme's smallest button is 60px, so a 60px triangle is okay", then great. Change the colours and you're done.
If not, there's a little more you can do.
It's not ideal, and it's not as pretty as it could be (still prettier than a lot out there), but if you can use JS to do this, and you can guarantee that all of the buttons are going to be on the page before the code runs, and their widths won't change, you can do something like:
JS + CSS (good enough!)
(function () {
var nav;
var buttons;
var style;
var styleText;
function getElWidth (el) { return el.getBoundingClientRect().width; }
function borderLeftText (width, i) {
return ["nav > button:nth-child(", i + 1, "):after { border-left: ", width, "px solid transparent; }"].join("");
}
function getStyleEntries (els) {
return els.map(getElWidth).map(borderLeftText);
}
try {
nav = document.querySelector("nav");
buttons = [].slice.call(nav.querySelectorAll("button"));
style = document.createElement("style");
styleText = getStyleEntries(buttons).join("\n");
style.textContent = styleText;
document.head.appendChild(style);
}
catch (err) {
// because the same browsers that will blow up won't support the CSS anyway;
// don't fix it, just move on
// good code shouldn't do this, but that's another story
}
}());
nav {
background-color: green;
padding: 20px;
}
nav > button {
background-color: rgb(60, 60, 60);
color: rgb(120, 120, 120);
position: relative;
border-radius: none;
border: none;
padding: 20px;
}
nav > button:after {
content: "";
width: 0;
height: 0;
right: 0;
bottom: 0;
position: absolute;
border-left: 60px solid transparent;
border-bottom: 15px solid green;
}
<nav >
<button >About</button>
<button >Bios</button>
</nav>
Here I'm basically grabbing all buttons that exist at this time, and writing my own CSS file, full of
nav > button:nth-child(1):after { /*...*/ }
nav > button:nth-child(2):after { /*...*/ }
and then appending a <style> tag to the <head> with that text inside.
There will just be one rule inside each one of those selectors; the border-left width is going to be set to the actual width of the button, in pixels.
Terms and Conditions
Now you have exactly what you wanted, but it required JS and requires that the buttons be on the page before that code runs, and requires that the widths not change (through styling, or through media-queries, et cetera). If either of those things happens, and you want to keep the corners updated, that code needs to be run again.
And if that's the case, special care should be made to cache and reuse the style tag, so that you don't have 8 tags with the same rules, on the page.
Conclusion
If you're good with mostly-fine, go CSS-only.
If you're good with knowing that the fix doesn't have to respond in real-time, or be applied to more and more buttons that are dynamically added, go JS + CSS.
If neither of those is good enough, use an .svg or .png
Transform: skewY(deg);
will skew a div up like that, you might need to build it in layers though, and then skew the text -deg to unskew the text
Simple example:
https://jsfiddle.net/uex2umac/
.wrapper{
width:500px;
height:300px;
background-color:#000;
overflow:hidden;
}
.tobeskew{
width:280px;
height:220px;
margin-bottom:0px;
background-color:#f1f;
text-align:center;
transform:skewY(-15deg);
}
p{
transform:skewY(15deg);
line-height:220px;
font-size:40px;
color:#fff;
}
<Div class="wrapper">
<div class="tobeskew">
<p>Hello</p>
</div>
</div>
Here's a solution using SVG background images. Note that using SVG requires IE9+ though...
BODY
{
background-color: #333;
}
.button
{
float:left;
float: left;
font-family: sans-serif;
font-weight: bold;
font-size: 44px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115' preserveAspectRatio='none'><polygon points='0 0 100 0 100 100 0 115' fill='%23282828'/></svg>");
background-size: 100% 100%;
color: #999;
height: 110px;
line-height: 96px;
padding: 0 50px;
margin-right: 10px;
}
.button.selected
{
color: #fbac31;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115' preserveAspectRatio='none'><polygon points='0 0 100 0 100 100 0 115' fill='black'/></svg>");
}
<div class="button">
<div>ABOUT</div>
</div>
<div class="button selected">
<div>BIOS</div>
</div>
I am trying to create a simple tooltip using just HTML+CSS. Here is what I have:
HTML:
<div>
<span>some text</span>
<span id="tooltip">some (1) longer (2) text (3)...</span>
</div>
CSS:
div {
position: relative;
background-color: lightgreen;
}
span#tooltip {
display: none;
position: absolute;
left: -10em;
background-color: yellow;
z-index: 1000;
}
div:hover span#tooltip {
display: block;
}
Unfortunately, the tooltip gets clipped. How to make it appear on top of everything?
http://jsfiddle.net/z9seu/
It gets clipped in this jsfiddle, in my case that is in a table in a div whatever, and gets clipped also.
Thanks!
The issue is with your
left: -10em;
If you remove that line (or make it a positive value), the full length of your text appears.
Since you are making it absolute, it moves it out of the screen.
As discussed in the comments under the question, a light-weight HTML + CSS + (vanilla/native) Javascript tooltip that should solve the OP's problem, and work on touchscreens at the same time. Here is the live demo.
And this is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Light-weight Tooltip by FC</title>
<style>
html {
font-size: 62.5%;
}
body {
font: normal 1.3em Verdana;
background-color: white; /* just for the JSBin demo */
}
h2 {
text-align: center;
margin-bottom: 2em;
}
span.tool {
position: relative;
display: inline-block;
border-bottom: 1px dashed black;
}
span.tool:hover {
cursor: help;
}
span.tip {
position: absolute;
bottom: 20px;
left: 0px;
display: block;
width: auto;
white-space: nowrap;
font-size: .9em;
border: 0px solid black; /* change as desired */
border-radius: 6px;
padding: 1px 5px;
background: #eee;
background: linear-gradient(top, #eee, #ccc);
background: -moz-linear-gradient(top, #eee, #ccc);
background: -o-linear-gradient(top, #eee, #ccc);
background: -webkit-linear-gradient(top, #eee, #ccc);
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background: -ms-linear-gradient(top, #eee, #ccc);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#eeeeee,EndColorStr=#cccccc);
zoom: 1;
visibility: hidden;
}
</style>
</head>
<body>
<h2>Light-weight Tooltip by FC</h2>
<p>The <span class="tool">WHO<span class="tip">World Health Organization</span></span> was established in 1948.</p>
<p>
It is part of the
<span class="tool">UN
<span class="tip">United Nations, <br>the successor of the <br>League of Nations</span>
</span>,
which was established in 1945.
</p>
<hr>
<p>Explanation and 'minds':</p>
<ul>
<li>The method consists of local nested spans ('tools' with 'tips' inside), positioned relative-absolute.</li>
<li>If the same tips are to be used several times throughout the page or website, the tip spans can be populated centrally with Javascript or server-side scripting.</li>
<li>In the current code the width of the tips is set to <i>auto</i>, and controlled with <br>s in the tip text. Change to fixed width as desired.</li>
<li>With the current code tablet users must tap (= <i>onclick</i>) rather than press-hold (= <i>onmousedown</i>). It is assumed that that is the intuitive thing most tablet users do, but it can be changed to press-hold.</li>
<li>The HTML is valid and the code works in IE8 as well.</li>
<li>It is said that <i>getElementsByClassName(class)</i> returns a dynamic node list, whereas <i>querySelectorAll(.class)</i> would return a static one. That would make the latter unsuited for dynamically updated elements/sections. Also, it is said to be slower/require more CPU power than the first. However, <i>querySelectorAll(.class)</i> is supported by IE8 (not 7). Mind the dot.</li>
<li>For the sake of completeness: IE9 does not form a border-radius when the element has no declared border, or a border-width of 0.</li>
</ul>
<script>
// Primer script to make IE8 support getElementsByClassName:
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(theClass) {
var elemArray = [];
var elems = this.getElementsByTagName('*');
for (var i=0; i<elems.length; i++) {
var allClasses = elems[i].className;
var classRegex = new RegExp('^('+theClass+')$|(\\s'+theClass+'\\b)');
// pattern demo on http://codepen.io/anon/pen/Hhswl?editors=100
if (classRegex.test(allClasses) == true)
elemArray.push(elems[i]);
}
return elemArray;
}
}
// End primer script
var tools = document.getElementsByClassName('tool');
for (var i=0; i<tools.length; i++) {
var tool = tools[i];
if ('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch)) {
tool.onclick = function() {
if (this.children[0].style.visibility == '' || this.children[0].style.visibility == 'hidden')
this.children[0].style.visibility = 'visible';
else
this.children[0].style.visibility = 'hidden';
}
}
else {
tool.onmouseover = function() {
this.children[0].style.visibility = 'visible';
}
tool.onmouseout = function() {
this.children[0].style.visibility = 'hidden';
}
}
}
</script>
</body>
</html>
.
If matters are not fully self-explanatory (after some study...), just let me know via a comment.
Is there any way of getting rounded corners on the outline of a div element, similar to border-radius?
I had an input field with rounded border and wanted to change colour of focus outline. I couldn't tame the horrid square outline to the input control.
So instead, I used box-shadow. I actually preferred the smooth look of the shadow, but the shadow can be hardened to simulate a rounded outline:
input, input:focus {
border: none;
border-radius: 2pt;
box-shadow: 0 0 0 1pt grey;
outline: none;
transition: .1s;
}
/* Smooth outline with box-shadow: */
.text1:focus {
box-shadow: 0 0 3pt 2pt cornflowerblue;
}
/* Hard "outline" with box-shadow: */
.text2:focus {
box-shadow: 0 0 0 2pt red;
}
<input class="text1">
<br>
<br>
<input type=text class="text2">
I usually accomplish this using the :after pseudo-element:
of course it depends on usage, this method allows control over individual borders, rather than using the hard shadow method.
you could also set -1px offsets and use a background linear gradient (no border) for a different effect once again.
body {
margin: 20px;
}
a {
background: #999;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
color: #fff;
position: relative;
border: 2px solid #000;
}
a:after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 5px;
border: 2px solid #ccc;
}
Button
Similar to Lea Hayes above, but here's how I did it:
div {
background: #999;
height: 100px;
width: 200px;
border: #999 solid 1px;
border-radius: 10px;
margin: 15px;
box-shadow: 0px 0px 0px 1px #fff inset;
}
<div></div>
No nesting of DIVs or jQuery necessary, Altho for brevity I have left out the -moz and -webkit variants of some of the CSS. You can see the result above
Use this one:
box-shadow: 0px 0px 0px 1px red;
I wanted some nice focus accessibility for dropdown menus in a Bootstrap navbar, and was pretty happy with this:
a.dropdown-toggle:focus {
display: inline-block;
box-shadow: 0 0 0 2px #88b8ff;
border-radius: 2px;
}
Visit Stackoverflow
We may see our wishes soonish by setting outline-style: auto It's on WebKits radar: http://trac.webkit.org/changeset/198062/webkit
See ya in 2030.
You're looking for something like this, I think.
div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid black;
background-color: #CCC;
height: 100px;
width: 160px;
}
Edit
There is a Firefox-only -moz-outline-radius properly, but that won't work on IE/Chrome/Safari/Opera/etc. So, it looks like the most cross-browser-compatible way* to get a curved line around a border is to use a wrapper div:
div.inner {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid black;
background-color: #CCC;
height: 100px;
width: 160px;
}
div.outer {
display: inline-block;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid red;
}
<div class="outer">
<div class="inner"></div>
</div>
*aside from using images
Firefox 88+: border-radius
From April 2021 you will be able to use a simple CSS for Firefox:
.actual {
outline: solid red;
border-radius: 10px;
}
.expected {
border: solid red;
border-radius: 10px;
}
In Firefox 88+,
<span class="actual">this outline</span>
should look like
<span class="expected">this border</span>
Current behaviour in Firefox 86.0:
Webkit: no solution
Using outline-style: auto will tell the «user agent to render a custom outline style»: see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style(.
Webkit-based browsers will then draw the outline over the border, when you use outline-style: auto. It's difficult to style it properly.
.actual {
outline: auto red;
border-radius: 10px;
}
.expected {
border: solid red;
border-radius: 10px;
}
In WebKit browsers (Chrome, Edge),
<span class="actual">this outline</span>
should look close to
<span class="expected">this border</span>
Current behaviour in Chrome 89.0:
More information
From Firefox 88 (to be released April 20 2021), outline will follow the shape of border-radius.
The current -moz-outline-radius will become redundant and will be removed.
See MDN's entry about -moz-outline-radius:
From Firefox 88 onwards, the standard outline property will follow the shape of border-radius, making -moz-outline-radius properties redundant. As such, this property will be removed.
(Feb 2023)
As far as I know, the Outline radius is only supported by Firefox and Firefox for android.
-moz-outline-radius: 1em;
I just found a great solution for this, and after looking at all the responses so far, I haven't seen it posted yet. So, here's what I did:
I created a CSS Rule for the class and used a pseudo-class of :focus for that rule. I set outline: none to get rid of that default light-blue non-border-radius-able 'outline' that Chrome uses by default. Then, in that same :focus pseudo-class, where that outline no longer exists, I added my radius and border properties. Leading to the following
outline: none;
border-radius: 5px;
border: 2px solid maroon;
to have a maroon-colored outline with a border radius that now appears when the element is tab-selected by the user.
If you want to get an embossed look you could do something like the following:
.embossed {
background: #e5e5e5;
height: 100px;
width: 200px;
border: #FFFFFF solid 1px;
outline: #d0d0d0 solid 1px;
margin: 15px;
}
.border-radius {
border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
}
.outline-radius {
-moz-outline-radius: 21px;
}
<div class="embossed"></div>
<div class="embossed border-radius"></div>
<div class="embossed border-radius outline-radius">-MOZ ONLY</div>
I have not found a work around to have this work in other browsers.
EDIT: The only other way you can do this is to use box-shadow, but then this wont work if you already have a box shadow on that element.
Chrome 94.0+
I tested it in chrome 94.0 and it seems that the outline property honors the border-radius now.
.outline {
outline: 2px solid red;
}
.border {
border: 2px solid red;
}
.outline-10 {
border-radius: 10px;
}
.border-2 {
border-radius: 2px;
}
.outline-2 {
border-radius: 2px;
}
.border-10 {
border-radius: 10px;
}
.outline-50 {
border-radius: 50%;
}
.border-50 {
border-radius: 50%;
}
.circle {
display: inline-block;
width:50px;
height: 50px;
}
<strong>Test this in chrome 94.0+</strong>
<br/><br/>
border-radius: 2px
<span class="outline outline-2">outline</span>
<span class="border border-2">border</span>
<br/><br/>
border-radius: 10px
<span class="outline outline-10">outline</span>
<span class="border border-10">border</span>
<br/><br/>
border-radius: 50%
<span class="outline outline-50">outline</span>
<span class="border border-50">border</span>
<span class="outline circle outline-50">outline</span>
<span class="border circle border-50">border</span>
As others have said, only firefox supports this. Here is a work around that does the same thing, and even works with dashed outlines.
.has-outline {
display: inline-block;
background: #51ab9f;
border-radius: 10px;
padding: 5px;
position: relative;
}
.has-outline:after {
border-radius: 10px;
padding: 5px;
border: 2px dashed #9dd5cf;
position: absolute;
content: '';
top: -2px;
left: -2px;
bottom: -2px;
right: -2px;
}
<div class="has-outline">
I can haz outline
</div>
No. Borders sit on the outside of the element and on the inside of the box-model margin area. Outlines sit on the inside of the element and the box-model padding area ignores it. It isn't intended for aesthetics. It's just to show the designer the outlines of the elements. In the early stages of developing an html document for example, a developer might need to quickly discern if they have put all of the skeletal divs in the correct place. Later on they may need to check if various buttons and forms are the correct number of pixels apart from each other.
Borders are aesthetic in nature. Unlike outlines they are actually apart of the box-model, which means they do not overlap text set to margin: 0; and each side of the border can be styled individually.
If you're trying to apply a corner radius to outline I assume you are using it the way most people use border. So if you don't mind me asking, what property of outline makes it desirable over border?
COMBINING BOX SHADOW AND OUTLINE.
A slight twist on Lea Hayes answer
I found
input[type=text]:focus {
box-shadow: 0 0 0 1pt red;
outline-width: 1px;
outline-color: red;
}
gets a really nice clean finish. No jumping in size which you get when using border-radius
There is the solution if you need only outline without border. It's not mine. I got if from Bootstrap css file. If you specify outline: 1px auto certain_color, you'll get thin outer line around div of certain color. In this case the specified width has no matter, even if you specify 10 px width, anyway it will be thin line. The key word in mentioned rule is "auto".
If you need outline with rounded corners and certain width, you may add css rule on border with needed width and same color. It makes outline thicker.
I was making custom radio buttons and the best customisable way i've found is using pseudo elements like this: Codepen
/*CSS is compiled from SCSS*/
.product-colors {
margin-bottom: 1em;
display: flex;
align-items: center;
}
.product-colors label {
position: relative;
width: 2.1em;
height: 2.1em;
margin-right: 0.8em;
cursor: pointer;
}
.product-colors label:before {
opacity: 0;
width: inherit;
height: inherit;
padding: 2px;
border: 2px solid red;
border-radius: 0.2em;
content: "";
position: absolute;
z-index: 1;
background: transparent;
top: -4px;
left: -4px;
}
.product-colors input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.product-colors input:checked + label:before, .product-colors input:focus + label:before {
opacity: 1;
}
<div class="product-colors">
<input type="radio" name="cs" id="cs1" value="black">
<label for="cs1" style="background:black"></label>
<input type="radio" name="cs" id="cs2" value="green">
<label for="cs2" style="background:green"></label>
<input type="radio" name="cs" id="cs3" value="blue">
<label for="cs3" style="background:blue"></label>
<input type="radio" name="cs" id="cs4" value="yellow">
<label for="cs4" style="background:yellow"></label>
</div>
clip-path: circle(100px at center);
This will actually make clickable only circle, while border-radius still makes a square, but looks as circle.
The simple answer to the basic question is no. The only cross-browser option is to create a hack that accomplishes what you want. This approach does carry with it certain potential issues when it comes to styling pre-existing content, but it provides for more customization of the outline (offset, width, line style) than many of the other solutions.
On a basic level, consider the following static example (run the snippent for demo):
.outline {
border: 2px dotted transparent;
border-radius: 5px;
display: inline-block;
padding: 2px;
margin: -4px;
}
/* :focus-within does not work in Edge or IE */
.outline:focus-within, .outline.edge {
border-color: blue;
}
br {
margin-bottom: 0.75rem;
}
<h3>Javascript-Free Demo</h3>
<div class="outline edge"><input type="text" placeholder="I always have an outline"/></div><br><div class="outline"><input type="text" placeholder="I have an outline when focused"/></div> *<i>Doesn't work in Edge or IE</i><br><input type="text" placeholder="I have never have an outline" />
<p>Note that the outline does not increase the spacing between the outlined input and other elements around it. The margin (-4px) compensates for the space that the outlines padding (-2px) and width (2px) take up, a total of 4px.</p>
Now, on a more advanced level, it would be possible to use JavaScript to bootstrap elements of a given type or class so that they are wrapped inside a div that simulates an outline on page load. Furthermore, event bindings could be established to show or hide the outline on user interactions like this (run the snippet below or open in JSFiddle):
h3 {
margin: 0;
}
div {
box-sizing: border-box;
}
.flex {
display: flex;
}
.clickable {
cursor: pointer;
}
.box {
background: red;
border: 1px solid black;
border-radius: 10px;
height: 5rem;
display: flex;
align-items: center;
text-align: center;
color: white;
font-weight: bold;
padding: 0.5rem;
margin: 1rem;
}
<h3>Javascript-Enabled Demo</h3>
<div class="flex">
<div class="box outline-me">I'm outlined because I contain<br>the "outline-me" class</div>
<div class="box clickable">Click me to toggle outline</div>
</div>
<hr>
<input type="text" placeholder="I'm outlined when focused" />
<script>
// Called on an element to wrap with an outline and passed a styleObject
// the styleObject can contain the following outline properties:
// style, width, color, offset, radius, bottomLeftRadius,
// bottomRightRadius, topLeftRadius, topRightRadius
// It then creates a new div with the properties specified and
// moves the calling element into the div
// The newly created wrapper div receives the class "simulated-outline"
Element.prototype.addOutline = function (styleObject, hideOutline = true) {
var element = this;
// create a div for simulating an outline
var outline = document.createElement('div');
// initialize css formatting
var css = 'display:inline-block;';
// transfer any element margin to the outline div
var margins = ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'];
var marginPropertyNames = {
marginTop: 'margin-top',
marginBottom: 'margin-bottom',
marginLeft: 'margin-left',
marginRight: 'margin-right'
}
var outlineWidth = Number.parseInt(styleObject.width);
var outlineOffset = Number.parseInt(styleObject.offset);
for (var i = 0; i < margins.length; ++i) {
var computedMargin = Number.parseInt(getComputedStyle(element)[margins[i]]);
var margin = computedMargin - outlineWidth - outlineOffset;
css += marginPropertyNames[margins[i]] + ":" + margin + "px;";
}
element.style.cssText += 'margin:0px !important;';
// compute css border style for the outline div
var keys = Object.keys(styleObject);
for (var i = 0; i < keys.length; ++i) {
var key = keys[i];
var value = styleObject[key];
switch (key) {
case 'style':
var property = 'border-style';
break;
case 'width':
var property = 'border-width';
break;
case 'color':
var property = 'border-color';
break;
case 'offset':
var property = 'padding';
break;
case 'radius':
var property = 'border-radius';
break;
case 'bottomLeftRadius':
var property = 'border-bottom-left-radius';
break;
case 'bottomRightRadius':
var property = 'border-bottom-right-radius';
break;
case 'topLeftRadius':
var property = 'border-top-left-radius-style';
break;
case 'topRightRadius':
var property = 'border-top-right-radius';
break;
}
css += property + ":" + value + ';';
}
// apply the computed css to the outline div
outline.style.cssText = css;
// add a class in case we want to do something with elements
// receiving a simulated outline
outline.classList.add('simulated-outline');
// place the element inside the outline div
var parent = element.parentElement;
parent.insertBefore(outline, element);
outline.appendChild(element);
// determine whether outline should be hidden by default or not
if (hideOutline) element.hideOutline();
}
Element.prototype.showOutline = function () {
var element = this;
// get a reference to the outline element that wraps this element
var outline = element.getOutline();
// show the outline if one exists
if (outline) outline.classList.remove('hide-outline');
}
Element.prototype.hideOutline = function () {
var element = this;
// get a reference to the outline element that wraps this element
var outline = element.getOutline();
// hide the outline if one exists
if (outline) outline.classList.add('hide-outline');
}
// Determines if this element has an outline. If it does, it returns the outline
// element. If it doesn't have one, return null.
Element.prototype.getOutline = function() {
var element = this;
var parent = element.parentElement;
return (parent.classList.contains('simulated-outline')) ? parent : null;
}
// Determines the visiblity status of the outline, returning true if the outline is
// visible and false if it is not. If the element has no outline, null is returned.
Element.prototype.outlineStatus = function() {
var element = this;
var outline = element.getOutline();
if (outline === null) {
return null;
} else {
return !outline.classList.contains('hide-outline');
}
}
// this embeds a style element in the document head for handling outline visibility
var embeddedStyle = document.querySelector('#outline-styles');
if (!embeddedStyle) {
var style = document.createElement('style');
style.innerText = `
.simulated-outline.hide-outline {
border-color: transparent !important;
}
`;
document.head.append(style);
}
/*########################## example usage ##########################*/
// add outline to all elements with "outline-me" class
var outlineMeStyle = {
style: 'dashed',
width: '3px',
color: 'blue',
offset: '2px',
radius: '5px'
};
document.querySelectorAll('.outline-me').forEach((element)=>{
element.addOutline(outlineMeStyle, false);
});
// make clickable divs get outlines
var outlineStyle = {
style: 'double',
width: '4px',
offset: '3px',
color: 'red',
radius: '10px'
};
document.querySelectorAll('.clickable').forEach((element)=>{
element.addOutline(outlineStyle);
element.addEventListener('click', (evt)=>{
var element = evt.target;
(element.outlineStatus()) ? element.hideOutline() : element.showOutline();
});
});
// configure inputs to only have outline on focus
document.querySelectorAll('input').forEach((input)=>{
var outlineStyle = {
width: '2px',
offset: '2px',
color: 'black',
style: 'dotted',
radius: '10px'
}
input.addOutline(outlineStyle);
input.addEventListener('focus', (evt)=>{
var input = evt.target;
input.showOutline();
});
input.addEventListener('blur', (evt)=>{
var input = evt.target;
input.hideOutline();
});
});
</script>
In closing, let me reiterate, that implementing this approach may require more styling than what I have included in my demos, especially if you have already styled the element you want outlined.
outline-style: auto has had full browser support for ages now.
Shorthand is:
outline: auto blue;
This let's you set a custom color, but not a custom thickness, unfortunately (although I think the browser default thickness is a good default).
You can also set a custom outline-offset when using outline-style: auto.
outline: auto blue;
outline-offset: 0px;
you can use box-shadow instead of outline like this
box-shadow: 0 0 1px #000000;
border-radius: 50px;
outline: none;
Try using padding and a background color for the border, then a border for the outline:
.round_outline {
padding: 8px;
background-color: white;
border-radius: 50%;
border: 1px solid black;
}
Worked in my case.
I just set outline transparent.
input[type=text] {
outline: rgba(0, 0, 0, 0);
border-radius: 10px;
}
input[type=text]:focus {
border-color: #0079ff;
}
I like this way.
.circle:before {
content: "";
width: 14px;
height: 14px;
border: 3px solid #fff;
background-color: #ced4da;
border-radius: 7px;
display: inline-block;
margin-bottom: -2px;
margin-right: 7px;
box-shadow: 0px 0px 0px 1px #ced4da;
}
It will create gray circle with wit border around it and again 1px around border!
I want to always show vertical scrollbar in my webpage. Is it possible using javascript? I think it is possible using javascript or jQuery. I want vertical scrollbar whether there is enough content to show or not.
thanks.
jQuery shouldn't be required. You could try adding the CSS:
body {overflow-y:scroll;}
This works across the latest browsers, even IE6.
Just a note: In OS X Lion, overflow set to "scroll" behaves more like auto in that scrollbars will only show when being used. They will disappear when not in use. So if any the solutions above don't appear to be working that might be why.
This is what you'll need to fix it:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
You can style it accordingly.
Just use CSS.
body {
overflow-y: scroll;
}
try calling a function on the onload method of your body tag and in that function change the style of body like this document.body.style.overflow = 'scroll'; also you might need to set the width of your html as this will show horizontal scroll bars as well
your html file will look something like this
<script language="javascript">
function showscroll() {
document.body.style.overflow = 'scroll';
}
</script>
</head>
<body onload="showscroll()">
set the overflow property of a containing div to scroll.
// Nothing to show here
body {
height: 150vh;
}
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .6);
}
/* Of course you can style it even more */
<h1 style="margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-family: Helvetica, Arial, sans-serif;">Scroll</h1>
Tried to do the solution with:
body {
overflow-y: scroll;
}
But I ended up with two scrollbars in Firefox in this case. So I recommend to use it on the html element like this:
html {
overflow-y: scroll;
}
Here is a method. This will not only provide scrollbar container, but will also show the scrollbar even if content isnt enough (as per your requirement). Would also work on Iphone, and android devices as well..
<style>
.scrollholder {
position: relative;
width: 310px; height: 350px;
overflow: auto;
z-index: 1;
}
</style>
<script>
function isTouchDevice() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
function touchScroll(id) {
if (isTouchDevice()) { //if touch events exist...
var el = document.getElementById(id);
var scrollStartPos = 0;
document.getElementById(id).addEventListener("touchstart", function (event) {
scrollStartPos = this.scrollTop + event.touches[0].pageY;
event.preventDefault();
}, false);
document.getElementById(id).addEventListener("touchmove", function (event) {
this.scrollTop = scrollStartPos - event.touches[0].pageY;
event.preventDefault();
}, false);
}
}
</script>
<body onload="touchScroll('scrollMe')">
<!-- title -->
<!-- <div class="title" onselectstart="return false">Alarms</div> -->
<div class="scrollholder" id="scrollMe">
</div>
</body>
Add the class to the div you want to be scrollable.
overflow-x: hidden; hides the horizantal scrollbar.
While overflow-y: scroll; allows you to scroll vertically.
<!DOCTYPE html>
<html>
<head>
<style>
.scroll {
width: 500px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="scroll"><h1> DATA </h1></div>
This did the trick for me. The latter (property background) sets the scroll bar to be always visible and also accepts further customization.
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
}
If the scroll appears/is needed, then, it is going to last forever.
I have been doing it this way:
.element {
overflow-y: visible;
}
Painfully simple I know...