I have a custom scrollbar that I would like to add a stroke/outline to. I have not found any articles on how to do this and the 'stroke' nor the 'outline' using CSS seems to do the trick. Is this possible to do?
JSFiddle: https://jsfiddle.net/hd2u4gs3/
<div id="box"></div>
body {
background: black;
}
::-webkit-scrollbar {
width: 25px;
}
::-webkit-scrollbar-track {
background: black;
}
::-webkit-scrollbar-thumb {
background: #7e7e7e;
stroke: yellow;
stroke-width: 3px;
height: 80px;
}
::-webkit-scrollbar-thumb:hover {
background: #ffffff;
}
#box {
height: 10000px;
}
If i was not wrong you need outline around thumb of scroll bar please
check the solution below
body {
background: black;
}
::-webkit-scrollbar {
width: 23px;
background: red;
}
::-webkit-scrollbar-track {
background: red;
border: 4px solid #fff;
border-bottom: none;
border-top: none;
}
::-webkit-scrollbar-thumb {
background: #7e7e7e;
stroke: yellow;
stroke-width: 3px;
height: 80px;
border: 4px solid yellow;
border-bottom: none;
border-top: none;
}
::-webkit-scrollbar-thumb:hover {
background: #ffffff;
border: 3px solid green;
border-bottom: none;
border-top: none;
}
#box {
height: 10000px;
}
<div id="box"></div>
How about just adding a right border to the box?
body {
background: black;
margin: 0;
}
::-webkit-scrollbar {
width: 25px;
}
::-webkit-scrollbar-track {
background: black;
}
::-webkit-scrollbar-thumb {
background: #7e7e7e;
stroke: yellow;
stroke-width: 3px;
height: 80px;
}
::-webkit-scrollbar-thumb:hover {
background: #ffffff;
}
#box {
height: 10000px;
border-right: 1px solid grey;
}
<div id="box"></div>
Or just add a border-left to the track: https://jsfiddle.net/owuc4jdf/
::-webkit-scrollbar-track {
background: black;
border-left: 1px solid green;
}
Related
.sear {
height: 50px;
width: 400px;
border: 0.5px solid black;
border-radius: 15px 0px 0px 15px;
}
.sear:focus {
//how to make only the border radius and other part of box selected?
}
.bar {
display: inline;
height: 50px;
width: 60px;
border: 0.5px solid black;
background-color: #ECECEC;
border-radius: 0px 15px 15px 0px;
}
.bar:hover {
cursor: pointer;
}
<input type="text" style="display: inline; margin-left: 20%;" class="sear" placeholder="Search...">
<button class="bar">🔎</button>
I was just wondering if it is possible to select only the border-radius and the rest of the box when the mouse is focused on the input as opposed to the corner of the box.
If you want to remove the default outline (which is not recommended for accessibility reasons) and add your own you can do this by changing the border color on focus but I would recommend wrapping the elements with a div and using javascript to add and remove a class to make this styling change like this:
var btnGroup = document.querySelector('.btn-group');
var input = document.querySelector('.sear');
input.onfocus = function() {
btnGroup.classList.add('focus');
}
input.onblur = function() {
btnGroup.classList.remove('focus');
}
.btn-group {
display: flex;
align-items: center;
position: relative;
width: 100%;
border: 1px solid black;
border-radius: 15px;
background-color: white;
width: 400px;
}
.btn-group.focus {
border-color: rebeccapurple;
}
.sear {
flex: 1;
border: none;
padding: .5rem;
margin: 0 0 0 0.5rem;
line-height: 1rem;
font-size: 1rem;
outline: none;
}
.bar {
padding: .5rem 1.5rem;
width: 60px;
background-color: #ECECEC;
border-radius: 0px 15px 15px 0px;
outline: none;
border-left: 1px solid #999;
}
.bar:hover {
cursor: pointer;
}
<div class="btn-group">
<input type="text" class="sear" placeholder="Search...">
<button class="bar">🔎</button>
</div>
for example:
.sear:focus {
/* to change the border when selected. */
border: 2px solid #0000ff;
}
If you are looking to have outline radius, its not posisble as mentioned in the comments, as a work around you can have something like this:
.sear {
height: 50px;
width: 400px;
border: 0.5px solid black;
border-radius: 15px 0px 0px 15px;
}
.sear:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 2px #9ecaed;
}
.bar {
display: inline;
height: 50px;
width: 60px;
border: 0.5px solid black;
background-color: #ECECEC;
border-radius: 0px 15px 15px 0px;
}
.bar:hover {
cursor: pointer;
}
<input type="text" style="display: inline; margin-left: 20%;" class="sear" placeholder="Search...">
<button class="bar">🔎</button>
Just trying to understand what you want.
May be something like this ?
.sear {
height: 50px;
width: 400px;
border: 1px solid black;
border-radius: 15px 0px 0px 15px;
margin-left: 20px;
}
.sear:focus {
border-top: solid 3px blue;
border-left: solid 3px blue;
border-bottom: solid 3px blue;
margin-top: -2px;
}
.sear:focus + .bar {
border-top: solid 3px blue;
border-right: solid 3px blue;
border-bottom: solid 3px blue;
}
.bar {
display: inline-block;
height: 54px;
width: 60px;
border: 1px solid black;
background-color: #ECECEC;
border-radius: 0px 15px 15px 0px;
}
.bar:hover {
cursor: pointer;
}
<input type="text" class="sear" placeholder="Search..."/>
<button class="bar">🔎</button>
I'm looking for a way to program a foldable ribbon. So I've this code here:
.ribbon {
position: absolute;
top: 20px;
right: 0;
padding: 15px;
}
.ribbon-content {
position: relative;
width: 100%;
height: 100px;
border: 1px solid #DDD;
}
.ribbon.base {
background: #666666;
color: #fff;
border-right: 5px solid #666666;
}
.ribbon.light {
background: #ecf0f1;
color: #2c3e50;
border-right: 5px solid #dde4e6;
}
.ribbon.dark {
background: #131313;
color: #fff;
border-right: 5px solid #464646;
}
.ribbon.base-alt {
background: #9cd70e;
color: #fff;
border-right: 5px solid #c6f457;
}
.ribbon.red {
background: #e91b23;
color: #fff;
border-right: 5px solid #f2787d;
}
.ribbon.orange {
background: #ff8a3c;
color: #fff;
border-right: 5px solid #ffc7a2;
}
.ribbon.yellow {
background: #ffd800;
color: #fff;
border-right: 5px solid #ffe866;
}
.ribbon:before,
.ribbon:after {
content: '';
position: absolute;
left: -9px;
border-left: 10px solid transparent;
}
.ribbon:before {
top: 0;
}
.ribbon:after {
bottom: 0;
}
.ribbon.base:before {
border-top: 27px solid #666666;
}
.ribbon.base:after {
border-bottom: 27px solid #666666;
}
.ribbon.light:before {
border-top: 27px solid #ecf0f1;
}
.ribbon.light:after {
border-bottom: 27px solid #ecf0f1;
}
.ribbon.dark:before {
border-top: 27px solid #131313;
}
.ribbon.dark:after {
border-bottom: 27px solid #131313;
}
.ribbon.base-alt:before {
border-top: 27px solid #9cd70e;
}
.ribbon.base-alt:after {
border-bottom: 27px solid #9cd70e;
}
.ribbon.red:before {
border-top: 27px solid #e91b23;
}
.ribbon.red:after {
border-bottom: 27px solid #e91b23;
}
.ribbon.orange:before {
border-top: 27px solid #ff8a3c;
}
.ribbon.orange:after {
border-bottom: 27px solid #ff8a3c;
}
.ribbon.yellow:before {
border-top: 27px solid #ffd800;
}
.ribbon.yellow:after {
border-bottom: 27px solid #ffd800;
}
.ribbon span {
display: block;
font-size: 16px;
font-weight: 600;
}
<div class="container bootstrap snippet">
<div class="row mb-20">
<div class="col-md-3">
<div class="ribbon-content">
<div class="ribbon base"><span>New: I'm a new feature.</span></div>
</div>
</div>
</div>
</div>
Now I need to change it somehow to only show the word New. When I hover now the word, the ribbon should fold out to the left until the whole text is visible. When I leave the ribbon now, it should fold back in.
Is this possible with a smooth animation? I need to be sure the the whole ribbon get's fold out because the length of the text can be different.
I would simplify your code like below then it should be easy to manage using a width animation:
.ribbon {
--c:red; /* Color */
--s:20px; /* Size */
--p:10px; /* padding*/
padding:var(--p);
border-left:calc(var(--s)/2) solid transparent;
display:inline-block;
background:
linear-gradient(to top right,transparent 48%,var(--c) 50%) border-box,
linear-gradient(to bottom right,transparent 48%,var(--c) 50%) border-box,
var(--c) padding-box;
background-size:var(--s) 100%;
background-repeat:no-repeat;
color:#fff;
margin-bottom:5px;
}
.ribbon > span {
display:inline-block;
white-space:nowrap;
max-width:0px;
transition:0.3s all;
overflow:hidden;
vertical-align:bottom;
}
.ribbon:hover > span {
display:inline-block;
white-space:nowrap;
max-width:180px;
transition:1s all;
}
body {
text-align:right;
}
<div class="ribbon">
NEW:<span> Some text here</span>
</div>
<br>
<div class="ribbon" style="--c:blue;--s:25px">
NEW: <span>Some long long text here</span>
</div>
<br>
<div class="ribbon" style="--c:purple;--s:45px;--p:15px">
NEW: <span>text</span>
</div>
<br>
If you're not looking for a curl effect, I think this might help you out.
.ribbon {
position: absolute;
top: 20px;
right: 0;
padding: 15px;
transform: translate3d(145px, 0, 0);
transition: transform 300ms;
}
.ribbon-content {
position: relative;
width: 100%;
height: 100px;
border: 1px solid #DDD;
overflow: hidden;
}
.ribbon-content:hover .ribbon {
transform: translate3d(0, 0, 0);
}
.ribbon.base {
background: #666666;
color: #fff;
border-right: 5px solid #666666;
}
.ribbon.light {
background: #ecf0f1;
color: #2c3e50;
border-right: 5px solid #dde4e6;
}
.ribbon.dark {
background: #131313;
color: #fff;
border-right: 5px solid #464646;
}
.ribbon.base-alt {
background: #9cd70e;
color: #fff;
border-right: 5px solid #c6f457;
}
.ribbon.red {
background: #e91b23;
color: #fff;
border-right: 5px solid #f2787d;
}
.ribbon.orange {
background: #ff8a3c;
color: #fff;
border-right: 5px solid #ffc7a2;
}
.ribbon.yellow {
background: #ffd800;
color: #fff;
border-right: 5px solid #ffe866;
}
.ribbon:before,
.ribbon:after {
content: '';
position: absolute;
left: -9px;
border-left: 10px solid transparent;
}
.ribbon:before {
top: 0;
}
.ribbon:after {
bottom: 0;
}
.ribbon.base:before {
border-top: 27px solid #666666;
}
.ribbon.base:after {
border-bottom: 27px solid #666666;
}
.ribbon.light:before {
border-top: 27px solid #ecf0f1;
}
.ribbon.light:after {
border-bottom: 27px solid #ecf0f1;
}
.ribbon.dark:before {
border-top: 27px solid #131313;
}
.ribbon.dark:after {
border-bottom: 27px solid #131313;
}
.ribbon.base-alt:before {
border-top: 27px solid #9cd70e;
}
.ribbon.base-alt:after {
border-bottom: 27px solid #9cd70e;
}
.ribbon.red:before {
border-top: 27px solid #e91b23;
}
.ribbon.red:after {
border-bottom: 27px solid #e91b23;
}
.ribbon.orange:before {
border-top: 27px solid #ff8a3c;
}
.ribbon.orange:after {
border-bottom: 27px solid #ff8a3c;
}
.ribbon.yellow:before {
border-top: 27px solid #ffd800;
}
.ribbon.yellow:after {
border-bottom: 27px solid #ffd800;
}
.ribbon span {
display: block;
font-size: 16px;
font-weight: 600;
}
<div class="container bootstrap snippet">
<div class="row mb-20">
<div class="col-md-3">
<div class="ribbon-content">
<div class="ribbon base"><span>New: I'm a new feature.</span></div>
</div>
</div>
</div>
</div>
You could get this easily done by wrapping the text after 'new' inside a div and do some changes to your css:
Wrap ': I'm a new feature.' inside <div class="infotext"></div>
Change display for .ribbon span from block to flex
Add css rules for your new class .Infotext like in the example below
The hover gets animated by the css-property transition. With all we tell it to animate everything and to do it in 0.5s.
To learn mor about transition take a look at this
documentation.
The text gets hidden by max-witdh: 0; and gets displayed by max-width: 300px.
I'm using max-width instead of width, becaus with that we dont have to
know the width of each ribbons infotext. To learn more about max-width click here
Feel free to ask me per comment, if anything is unclear.
Working example:
.ribbon {
position: absolute;
top: 20px;
right: 0;
padding: 15px;
}
.ribbon-content{
position: relative;
width: 100%;
height: 100px;
border: 1px solid #DDD;
}
.ribbon.base {
background: #666666;
color: #fff;
border-right: 5px solid #666666;
}
.ribbon.light {
background: #ecf0f1;
color: #2c3e50;
border-right: 5px solid #dde4e6;
}
.ribbon.dark {
background: #131313;
color: #fff;
border-right: 5px solid #464646;
}
.ribbon.base-alt {
background: #9cd70e;
color: #fff;
border-right: 5px solid #c6f457;
}
.ribbon.red {
background: #e91b23;
color: #fff;
border-right: 5px solid #f2787d;
}
.ribbon.orange {
background: #ff8a3c;
color: #fff;
border-right: 5px solid #ffc7a2;
}
.ribbon.yellow {
background: #ffd800;
color: #fff;
border-right: 5px solid #ffe866;
}
.ribbon:before, .ribbon:after {
content: '';
position: absolute;
left: -9px;
border-left: 10px solid transparent;
}
.ribbon:before {
top: 0;
}
.ribbon:after {
bottom: 0;
}
.ribbon.base:before {
border-top: 27px solid #666666;
}
.ribbon.base:after {
border-bottom: 27px solid #666666;
}
.ribbon.light:before {
border-top: 27px solid #ecf0f1;
}
.ribbon.light:after {
border-bottom: 27px solid #ecf0f1;
}
.ribbon.dark:before {
border-top: 27px solid #131313;
}
.ribbon.dark:after {
border-bottom: 27px solid #131313;
}
.ribbon.base-alt:before {
border-top: 27px solid #9cd70e;
}
.ribbon.base-alt:after {
border-bottom: 27px solid #9cd70e;
}
.ribbon.red:before {
border-top: 27px solid #e91b23;
}
.ribbon.red:after {
border-bottom: 27px solid #e91b23;
}
.ribbon.orange:before {
border-top: 27px solid #ff8a3c;
}
.ribbon.orange:after {
border-bottom: 27px solid #ff8a3c;
}
.ribbon.yellow:before {
border-top: 27px solid #ffd800;
}
.ribbon.yellow:after {
border-bottom: 27px solid #ffd800;
}
.ribbon span {
display: flex;
font-size: 16px;
font-weight: 600;
}
.ribbon .infotext {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
max-width: 0;
white-space: nowrap;
overflow: hidden;
}
.ribbon:hover .infotext {
max-width: 300px;
}
<div class="container bootstrap snippet">
<div class="row mb-20">
<div class="col-md-3">
<div class="ribbon-content">
<div class="ribbon base"><span>New<div class="infotext">: I'm a new feature.</div></span></div>
</div>
</div>
</div>
</div>
Try JqueryUI for the animation effect. I havn't tested it, but probably this will give you the idea.
<div class="container bootstrap snippet">
<div class="row mb-20">
<div class="col-md-3">
<div class="ribbon-content">
<div class="ribbon base"><span class='newSpn'>New:</span><span class='content'> I'm a new feature.</span></div>
</div>
</div>
</div>
</div>
$('.newSpn').mouseenter(function(){
$('.content').show('slide', {direction: 'left'}, 1000);
}).mouseleave(function(){
$('.content').hide('slide', {direction: 'right'}, 1000);
});
It requires the jQuery-ui library. See http://www.jqueryui.com
I have a div that has a background image but has 50% opacity.
Now I have a div that is child and I want what every the content it has to have 100% opacity. You can see in the snipplet headings and textbox and button has less opacity.
Can anyone help how to fix this thing? I tried to apply opacity 100% to child but it didn't work.
/* CSS to be fixed*/
#home_div
{
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Shoppers_on_Dundas%2C_near_Yonge.jpg/1200px-Shoppers_on_Dundas%2C_near_Yonge.jpg");
opacity: 0.5;
filter: alpha(opacity=50);
/*background-color: #0050A0;*/
background-color: lightgrey;
padding-top: 200px;
color: white;
padding-bottom: 200px;
height: 100%;
}
#home_div_content
{
opacity: 1.0;
filter: alpha(opacity=100);
text-align: center;
}
#header
{
height: 70px;
border-bottom: 4px solid lightgrey;
}
#header_content
{
margin-top: 10px;
margin-left: 80px;
}
.brandmark
{
margin-top: -20px;
}
.link_to a
{
color: #0050A0 !important;
}
.featured_div
{
display: none;
}
.featured_close_anchor, .featured_anchor_close
{
text-align: center;
}
#heading, #tag_line
{
top: -300px;
position:relative;
color: #0050A0;
}
#search
{
border-radius: 0 !important;
border-color: #0050A0 !important;
width: 60%;
height: 35px;
padding: 8px 15px;
color: #0050A0; /* change color of text to be typed inside search box */
font-size: 13px;
line-height: 20px;
background-color: transparent;
border: 1px solid #ccc;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-custom {
color: #FFFFFF;
background-color: #0050A0; /* change button color */
border-radius: 0!important; /* button border radius */
padding: 5px 11px; /* Button size change*/
margin-top: -3.5px;
border-top: 2px solid #0050A0;
border-bottom: 3px solid #0050A0;
margin-left: -3px;
}
.btn-custom:hover{
background-color:#9AC94B; /* change button color on hover */
border-radius: 0!important;
}
.left_categories
{
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 1px;
border-left: 4px solid #0050A0;
}
.left_categories:hover
{
border-top: 1px solid lightgrey;
border-bottom: 1px solid lightgrey;
border-left: 4px solid #E5002B;
}
.active_category
{
background-color: #0050A0;
color: white !important;
border-left: 4px solid #E5002B;
}
.search_section
{
margin-top: 30px;
}
a
{
text-decoration: none !important;
}
.flash_nav
{
height: 90px;
border: 0 !important;
background-color: #283442;
}
.gradient
{
background: -moz-linear-gradient(left, white 0%, white 45%, #12A8E0 85%, #0050A0 100%);
}
.flash_navbar a
{
color: black !important;
}
.search_form
{
width: 70%;
}
.nav_form
{
border-radius: 0;
margin-top: 27px;
}
#searchBar
{
border-color: #0050A0;
}
#searchButton
{
background-color: #0050A0;
color: white;
border: none;
}
<div id="home_div">
<div class="container" id="home_div_content">
<h1 id="heading">Find your product!</h1>
<h4 id="tag_line">Search what you are looking for.</h4>
<form method="GET" action="/product/search">
<input type="text" name="product" id="search" placeholder="Enter product name" class="searchTextBox" />
<button type="submit" id="quick-search" class="btn btn-custom"><span class="glyphicon glyphicon-search custom-glyph-color"></span></button>
</form>
<br />
view <i class="fa fa-chevron-down"></i> featuring
</div>
</div>
FIDDLE
An opacity rule will always affect child/descendant elements since they are part of the parent, and the rule says the parent should be 50% opacity.
To get round this, use a pseudo element and give that reduced opacity rather than the parent.
HTML
<div id='outer'>
<div id='inner'></div>
</div>
CSS
#outer { width: 200px; height: 200px; position: relative; padding: 2em; }
#outer::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: red; opacity: .5; z-index: -1; }
#inner { width: 100%; height: 100%; background: blue; }
Fiddle.
You can find a screenshot of my problem here; While trying to style the range input I noticed that it has white corners. I can't seem to figure out why or how to remove them, I first thought it was an outline but setting outline to none did nothing. Here is a JSFiddle: http://jsfiddle.net/c1y0y7dj/
My CSS
input[type=range] {
-webkit-appearance: none;
width: 200px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 200px;
height: 5px;
background: #565656;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #F06A00;
margin-top: -5px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-moz-range-track {
width: 200px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #F06A00;
}
input[type=range]::-ms-track {
width: 200px;
height: 5px;
background: transparent;
border-color: transparent;
border-width: 6px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #373737;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #575757;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #F06A00;
}
input[type=range]:focus::-ms-fill-lower {
background: #373737;
}
input[type=range]:focus::-ms-fill-upper {
background: #575757;
}
Try this css
input[type=range] {
-webkit-appearance: none;
width: 200px;
background-color: transparent;
}
Here is the solution
You should add to
input[type=range] {
-webkit-appearance: none;
width: 200px;
background: transparent;
}
The input tag by default has a white background set by chrome if you just added
background-color :#565656 ;
to your first input selector it should solve your issue
I'm having troubles on applying a hover effect on different HTML elements, such as changing the color of a DIV's border and it's parents DIV's background color.
My HTML code looks like this:
<div id="time-later">
<div class="time-arrow"></div>
<p>later</p>
</div>
The matching CSS code:
#time-later {
height: 35px;
width: calc(25% - (15px/4));
}
#time-later p {
display: block;
width: calc(100% - 14.5px);
margin-right: 14.5px;
}
#time-later .time-arrow {
float: right;
width: 0;
height: 0;
border-top: 17.5px solid transparent;
border-left: 14.5px solid green;
border-bottom: 17.5px solid transparent;
z-index: 1;
}
some styling
#time-later p {
text-align: center;
line-height: 35px;
background-color: green;
}
#time-later p:hover {
background-color: red;
}
#time-later p:active {
color: #FFF;
background-color: gray;
}
When I move the mouse over the #time-later element I want the background of the p-element and the border of the .arrow-element to be colored in the same color.
JSFiddle
Is there any CSS-only solution to achieve something like this? I know it would be easier to place an image instead, but I'm searching for a CSS-only solution. Thank you for your help!
Move :hover and :active to the parent element, then target the children as follows:
Example Here
#time-later:hover > p { background-color: red; }
#time-later:hover > .time-arrow { border-left-color: red; }
#time-later:active > p { background-color: gray; color: white; }
#time-later:active > .time-arrow { border-left-color: gray; }
JSBIN
Through modify their parent pseudo-style to handle what you want.
css
#time-later:hover p{
background-color: red;
}
#time-later:hover .time-arrow{
border-left: 14.5px solid red;
}
#time-later:active p {
color: #FFF;
background-color: gray;
}
#time-later:active .time-arrow{
border-left: 14.5px solid gray;
}
like this? http://jsfiddle.net/z0vm0nm4/1/
#time-later:hover p{
background-color: red;
}
#time-later:hover .time-arrow {
border-left: 14.5px solid red;
}
you can do hover on div
example:
div#time-later:hover .time-arrow{
border-top: 17.5px solid transparent;
border-left: 14.5px solid background:tan;
border-bottom: 17.5px solid transparent;
}
div#time-later:hover p{
background:tan;
}
try this one, worked for me:
/* some stylings */
#time-later p {
text-align: center;
line-height: 35px;
background-color: green;
}
#time-later:hover p {
background-color: red;
}
#time-later:active p {
color: #FFF;
background-color: gray;
}
#time-later:hover .time-arrow {
border-left: 14.5px solid red;
}
#time-later:active .time-arrow {
border-left: 14.5px solid gray;
}
http://jsfiddle.net/h50L9noy/