Why Safari shows combo box arrow incorrectly - javascript

Only Safari shows the arrow on all elements below.
Normally all browsers show something like this:
Can't really post the whole site, but related HTML
and some styles:
#searchMain{
float:right;
width: 17rem;
height:261px;
margin-left:8px;
margin-right: 8px;
margin-bottom: 9px;
}
.searchDiv{
float:right;
width: 17rem;
height: 12.5%;
/* margin-bottom: .53rem; */
padding: 0px 0rem 11px 0rem;
text-align: center;
}
::-webkit-input-placeholder { color: #10376E; }
:-moz-placeholder { color: #10376E; }
::-moz-placeholder { color: #10376E; }
:-ms-input-placeholder { color: #10376E; }
#dateFrom:disabled::-webkit-input-placeholder { color: #cccccc; }
#dateFrom:disabled:-moz-placeholder { color: #cccccc; }
#dateFrom:disabled::-moz-placeholder { color: #cccccc; }
#dateFrom:disabled:-ms-input-placeholder { color: #cccccc; }
#dateTo:disabled::-webkit-input-placeholder { color: #cccccc; }
#dateTo:disabled:-moz-placeholder { color: #cccccc; }
#dateTo:disabled::-moz-placeholder { color: #cccccc; }
#dateTo:disabled:-ms-input-placeholder { color: #cccccc; }
/*
background:url(./down.png) no-repeat right center;
padding-right:10px;
*/
.searchDiv select,
.searchDiv input{
margin-bottom:0em;
width: 256px;
height: 1.4rem;
color: #10376E;
border: solid 1px #10376E;
border-radius:9px;
outline: none;
background-color:rgba(250, 255, 250, 0.7);
}
.searchDiv[select_box='true']:after {
content:'>';
font:11px "Consolas", monospace;
color:white;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
right:8px; top:2px;
padding:0 0 2px;
margin: 2px 0px 0px 0px;
position:absolute;
pointer-events:none;
}
.disabled
{
color: #cccccc;
border: solid 1px #cccccc;
}
.searchDiv[select_box='true']:before {
content:'';
right:0px; top:0px;
width:18px; height:22px;
background:#10376E;
position:absolute;
pointer-events:none;
display:block;
-webkit-border-top-right-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-topright: 9px;
-moz-border-radius-bottomright: 9px;
border-top-right-radius: 9px;
border-bottom-right-radius: 9px;
}
.searchDiv
{
width:256px;
overflow: hidden;
text-align: justify;
position:relative;
}
.searchDiv select
{
width:256px;
}
.searchDiv input{
padding: 0 3%;
}
.searchDiv input:focus{
background-color: white;
box-shadow: 0px 1px 10px 0px rgba(100, 100, 255, 0.3);
}
.searchDiv h3{
margin-top: .4em;
font-weight: bold;
}
#dateFrom,
#dateTo{
width:49%;
}
.resetSearch{
width: 256px;
height:22px;
text-align: center;
border-radius:9px;
background-color:#749FAF;
padding:.2em;
background-color: #10376E;
color: white;
border: solid 1px #10376E;
}
.resetSearch:hover{
color: #10376E;
background-color: white;
}
.resetSearch a, .resetSearch a:visited{
color: inherit;
text-decoration:none;
}
I'm not sure if information above is enough to understand the problem(hope it's well known issue), but I want to prevent Safari from showing those arrows and render them just like in other browsers.


You should try using the pseudo-element (::after) instead of using the pseudo-class (:after), which is a distinction introduced in CSS3.
Research:
MDN :after

Related

changes made in my variables.scss isn't working on subsequent clones of my repo

I've been adding styling to my variables.scss. It works on my MAC, but when another developer checks out the code they're not seeing the styling that's in the variables.scss.
.md body {
--ion-background-color: #ffffff;
--ion-background-color-rgb: 18, 18, 18;
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255, 255, 255;
--ion-border-color: #222222;
--ion-color-step-50: #1e1e1e;
--ion-color-step-100: #2a2a2a;
--ion-color-step-150: #363636;
--ion-color-step-200: #414141;
--ion-color-step-250: #4d4d4d;
--ion-color-step-300: #595959;
--ion-color-step-350: #656565;
--ion-color-step-400: #717171;
--ion-color-step-450: #7d7d7d;
--ion-color-step-500: #898989;
--ion-color-step-550: #949494;
--ion-color-step-600: #a0a0a0;
--ion-color-step-650: #acacac;
--ion-color-step-700: #b8b8b8;
--ion-color-step-750: #c4c4c4;
--ion-color-step-800: #d0d0d0;
--ion-color-step-850: #dbdbdb;
--ion-color-step-900: #e7e7e7;
--ion-color-step-950: #f3f3f3;
--ion-item-background: #1e1e1e;
--ion-toolbar-background: #4854e0;
--ion-tab-bar-background: #4854e0;
--ion-card-background: white;
ion-icon {
color: white;
}
ion-label {
color: white;
}
ion-title {
text-align: center;
}
.profileBg {
background-image: url("../assets/background-images/headerBg.png") !important;
padding-top: 1px !important;
img {
height: 200px;
width: 200px;
border-radius: 25%;
align-items: center;
margin: 60px auto;
display: block;
}
}
.alert-radio-label.sc-ion-alert-md {
padding-left: 52px;
padding-right: 26px;
padding-top: 13px;
padding-bottom: 13px;
-ms-flex: 1;
flex: 1;
color: #222428;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.authui {
--background: white;
--color: black;
}
.alert-sub-title.sc-ion-alert-md {
color: black;
}
.alert-message.sc-ion-alert-md {
color: black;
}
.submit {
--background: #4854e0;
color: white;
}
.action-sheet-icon.sc-ion-action-sheet-md {
padding-bottom: 4px;
margin-left: 0;
margin-right: 32px;
margin-top: 0;
margin-bottom: 0;
font-size: 24px;
color: black;
}
.action-sheet-button-inner.sc-ion-action-sheet-md {
color: black;
}
.standardBackground {
--background: #fff url("../../../assets/background-images/login-image.jpeg") no-repeat center center / cover;
padding-bottom: 55px;
}
}
Any idea why this is happening? Why is the styling in variables.scss only working on my mac and when other devs checkout my code the styling in variables.scss isn't working?
Any help would be greatly appeciated.

header changing style when uploaded to server

I have a website which is live. Its header should be like the below image:
When I am working on local its like that only, but when I am uploading to the server the header becomes small in every page except one page
every page it becomes small page except this page except
The CSS is below for header:
body {
font-family: Montserrat, sans-serif;
}
.navbar-inverse .navbar-toggle {
border-color: #fff;
border-radius: 0;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: transparent;
padding: 10px 22px 0 5px;
}
.navbar-inverse :hover {
background-color: transparent;
}
.navbar-header {
float: none;
}
.custom-navbar {
padding: 0;
}
.navbar {
border-radius: 0;
background-color: #01b7a8;
border-color: #01b7a8;
box-shadow: 0 0px 10px 3px rgba(0, 0, 0, .5);
}
.navbar-inverse .navbar-nav>li>a {
font-size: 19px;
color: #fff;
letter-spacing: 1px;
}
.navbar-inverse .navbar-nav>li>a:hover {
background-color: #01b7a8;
color: #0a2240;
}
.navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:hover {
background-color: transparent;
}
#media screen and (max-width: 768px) {
.custom-navbar {
display: inline-flex;
}
.custom-navbar li .btn {
margin-bottom: 2vh;
}
}
#media screen and (min-width: 768px) {
.navbar-right {
/*position: relative;
top: -7vh*/
}
.custom-navbar {
position: absolute;
top: 1vh;
z-index: 2222;
right: 3vh;
}
}
#media (max-width: 767px) .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #0a2240;
}
#media (max-width: 767px) .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #0a2240;
background-color: #fff;
/* padding: 0 15px 0 15px; */
}
.dropdown-menu>li>a {
color: #0a2240 !important;
background-color: #efeff0;
}
/* dropdown-menu */
#media (max-width: 767px) .navbar-nav .open .dropdown-menu>li>a {
line-height: 20px;
}
.container-fluid {
padding-right: 15px;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover {
color: #fff;
background-color: transparent;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
color: #fff;
background-color: #d9f4f2;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-menu {
position: absolute;
top: 132%;
border-radius: 0;
padding: 0 0;
border: 0px;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #333! important;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-menu>li>a {
display: block;
padding: 10px 20px;
color: #0a2240 !important;
background-color: #efeff0;
}
.dropdown-menu>li>a:hover {
background-color: #d9f4f2;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
/*dropdown-menu end */
/*top button */
.btn:hover {
background-color: #2B3856 !important;
color: #f8dd4d !important;
border-color: #2B3856 !important;
}
.btn:active {
background-color: #2B3856 !important;
color: #f8dd4d !important;
border-color: #2B3856 !important;
}
/*links styling*/
#myNavbara>li>a: hover {
background-color: #01b7a8 !important;
color: #0a2240 !important;
}
can anyone tell me how to fix this?

I think, there is must be a live CDN link and which does not work on local may be because internet issue and when you upload on server then It works with internet.
You can check your all the files for this. May be this will work for you.
Thank you.

I'm noticing that you have inline styles applied to your header buttons, which are different for this page and this page. Also, I noticed that some of your font sizes are in vh. Try using something like em or rem instead.
I don't know how you're building this website, but if possible, drop the inline styles and style the buttons with their class instead.

How to set specified date bootstrap datepicker?

I'm using this bootstrap datepicker plugin and I want to set class for my specified days for example I have booked days and I want to set a class for my these days but I don't want to disabed them how can I do hat ?
$(document).ready(function() {
$('#date-range12').dateRangePicker({
inline: true,
container: '#date-range12-container',
alwaysOpen: true,
format: 'DD.MM.YYYY',
separator: ' to ',
language: 'tr',
showTopbar: false,
showWeekNumbers: false,
extraClass: 'date-range-picker19',
monthSelect: true,
yearSelect: true,
customArrowPrevSymbol: '',
customArrowNextSymbol: '',
//maxDays: 7,
//minDays: 3,
startDate: moment(),
startOfWeek: 'monday',
customTopBar: 'Tarih Aralığı Seçiniz',
showDateFilter: function(time, date) {
return '<div style="padding:0 5px;">\
<span style="font-weight:bold">' + date + '</span>\
<div style="opacity:0.3;">$' + Math.round(Math.random() * 999) + '</div>\
</div>';
}
});
});
.date-picker {
width: 170px;
height: 25px;
padding: 0;
border: 0;
line-height: 25px;
padding-left: 10px;
font-size: 12px;
font-family: Arial, sans-serif;
font-weight: 700;
cursor: pointer;
color: #303030;
position: relative;
z-index: 2
}
.date-picker-wrapper {
position: absolute;
z-index: 1;
//border: 1px solid #bfbfbf;
background-color: #efefef;
//padding: 5px 12px;
font-size: 12px;
line-height: 20px;
color: #aaa;
font-family: Arial, sans-serif;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
-webkit-box-sizing: initial;
box-sizing: initial
}
.dp-clearfix {
clear: both;
height: 0;
font-size: 0
}
.date-picker-wrapper.inline-wrapper {
position: relative;
-webkit-box-shadow: none;
box-shadow: none;
display: inline-block
}
.date-picker-wrapper.single-date {
width: auto
}
.date-picker-wrapper.no-shortcuts {
//padding-bottom: 12px
}
.date-picker-wrapper.no-topbar {
//padding-top: 12px
}
.date-picker-wrapper .footer {
font-size: 11px;
//padding-top: 3px
}
.date-picker-wrapper b {
color: #666;
font-weight: 700
}
.date-picker-wrapper a {
color: #6bb4d6;
text-decoration: underline
}
.date-picker-wrapper .month-name {
text-transform: uppercase
}
.date-picker-wrapper .select-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
vertical-align: middle
}
.date-picker-wrapper .select-wrapper:hover {
text-decoration: underline
}
.date-picker-wrapper .month-element {
display: inline-block;
vertical-align: middle
}
.date-picker-wrapper .select-wrapper select {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: -1px;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
text-transform: inherit;
color: inherit;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: 0 0;
border: 0;
outline: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
opacity: .01
}
.date-picker-wrapper .month-wrapper {
border: 1px solid #bfbfbf;
//border-radius: 3px;
//background-color: #fff;
background-color: #d0d5de;
padding: 12px 12px 40px 12px;
cursor: default;
position: relative;
_overflow: hidden;
width:100% !important;
}
.date-picker-wrapper .month-wrapper table {
width: 190px;
float: left;
margin-right:20px;;
}
.date-picker-wrapper .month-wrapper table.month2 {
width: 190px;
float: left
}
.date-picker-wrapper .month-wrapper table td,
.date-picker-wrapper .month-wrapper table th {
vertical-align: middle;
text-align: center;
line-height: 14px;
margin: 0;
padding: 0;
color:#FFF;
font-weight: normal;
font-size: 14px;
}
.date-picker-wrapper .month-wrapper table .day {
//padding: 5px 0;
//line-height: 1;
//font-size: 12px;
//margin-bottom: 1px;
//color: #ccc;
//cursor: default;
line-height: 1;
font-size: 12px;
color: #ccc;
cursor: not-allowed;
padding: 15px;
border: 1px solid #eee;
background: #f0f0f0;
}
.date-picker-wrapper .month-wrapper table div.day.lastMonth,
.date-picker-wrapper .month-wrapper table div.day.nextMonth {
color: #999;
cursor: default
}
.date-picker-wrapper .month-wrapper table .week-name {
height: 40px;
line-height: 20px;
font-weight: 100;
text-transform: uppercase;
}
.date-picker-wrapper .month-wrapper table .day.has-tooltip {
cursor: help!important
}
.date-picker-wrapper .month-wrapper table .day.has-tooltip .tooltip {
white-space: nowrap
}
.date-picker-wrapper .time label {
white-space: nowrap;
}
.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
color: #333;
cursor: pointer;
padding: 15px;
border: 1px solid #eee;
background: #FFF;
}
.date-picker-wrapper .month-wrapper table .day.lastMonth,
.date-picker-wrapper .month-wrapper table .day.nextMonth {
display: none
}
.date-picker-wrapper .month-wrapper table .day.real-today {
background-color: #ffe684
}
.date-picker-wrapper .month-wrapper table .day.real-today.checked,
.date-picker-wrapper .month-wrapper table .day.real-today.hovering {
background-color: #70ccd5
}
.date-picker-wrapper table .caption {
height: 40px;
background-color: #4d5567;
color: #CBCDD0;
padding: 13px 0px;
font-size: 15px;
text-align: center;
}
.date-picker-wrapper table .caption>th:first-of-type,
.date-picker-wrapper table .caption>th:last-of-type {
width: 27px;
}
.date-picker-wrapper table .caption .next,
.date-picker-wrapper table .caption .prev {
width:50px;
height:40px;
line-height:40px;
vertical-align: middle;
display:block;
cursor: pointer;
background:#667493;
}
.caption .next{
float:right;
}
.date-picker-wrapper table .caption .next:hover,
.date-picker-wrapper table .caption .prev:hover {
background-color: #ccc;
color: #fff
}
.date-picker-wrapper .gap {
position: relative;
z-index: 1;
width: 15px;
height: 100%;
background-color: red;
font-size: 0;
line-height: 0;
float: left;
top: -5px;
margin: 0 10px -10px;
visibility: hidden;
height: 0;
display:none;
}
.date-picker-wrapper .gap .gap-lines {
height: 100%;
overflow: hidden
}
.date-picker-wrapper .gap .gap-line {
height: 15px;
width: 15px;
position: relative
}
.date-picker-wrapper .gap .gap-line .gap-1 {
z-index: 1;
height: 0;
border-left: 8px solid #fff;
border-top: 8px solid #eee;
border-bottom: 8px solid #eee
}
.date-picker-wrapper .gap .gap-line .gap-2 {
position: absolute;
right: 0;
top: 0;
z-index: 2;
height: 0;
border-left: 8px solid transparent;
border-top: 8px solid #fff
}
.date-picker-wrapper .gap .gap-line .gap-3 {
position: absolute;
right: 0;
top: 8px;
z-index: 2;
height: 0;
border-left: 8px solid transparent;
border-bottom: 8px solid #fff
}
.date-picker-wrapper .gap .gap-top-mask {
width: 6px;
height: 1px;
position: absolute;
top: -1px;
left: 1px;
background-color: #eee;
z-index: 3
}
.date-picker-wrapper .gap .gap-bottom-mask {
width: 6px;
height: 1px;
position: absolute;
bottom: -1px;
left: 7px;
background-color: #eee;
z-index: 3
}
.date-picker-wrapper .selected-days {
display: none
}
.date-picker-wrapper .drp_top-bar {
line-height: 1.4;
position: relative;
padding: 10px 40px 10px 0
}
.date-picker-wrapper .drp_top-bar .error-top,
.date-picker-wrapper .drp_top-bar .normal-top {
display: none
}
.date-picker-wrapper .drp_top-bar .default-top {
display: block
}
.date-picker-wrapper .drp_top-bar.error .default-top {
display: none
}
.date-picker-wrapper .drp_top-bar.error .error-top {
display: block;
color: red
}
.date-picker-wrapper .drp_top-bar.normal .default-top {
display: none
}
.date-picker-wrapper .drp_top-bar.normal .normal-top {
display: block
}
.date-picker-wrapper .drp_top-bar.normal .normal-top .selection-top {
color: #333
}
.date-picker-wrapper .drp_top-bar .apply-btn {
position: absolute;
right: 0;
top: 6px;
padding: 3px 5px;
margin: 0;
font-size: 12px;
border-radius: 4px;
cursor: pointer;
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
color: #fff;
line-height: initial
}
.date-picker-wrapper .drp_top-bar .apply-btn.disabled {
cursor: pointer;
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')
}
.date-picker-wrapper .time {
position: relative
}
.date-picker-wrapper.single-month .time {
display: block
}
.date-picker-wrapper .time input[type=range] {
vertical-align: middle;
width: 129px;
padding: 0;
margin: 0;
height: 20px
}
.date-picker-wrapper .time1 {
width: 180px;
padding: 0 5px;
text-align: center
}
.time2 {
width: 180px;
padding: 0 5px;
text-align: center
}
.date-picker-wrapper .time1 {
float: left
}
.date-picker-wrapper .time2 {
float: right
}
.date-picker-wrapper .hour {
text-align: right
}
.minute {
text-align: right
}
.date-picker-wrapper .hide {
display: none
}
.date-picker-wrapper .date-range-length-tip {
position: absolute;
margin-top: -4px;
margin-left: -8px;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
display: none;
background-color: #ff0;
padding: 0 6px;
border-radius: 2px;
font-size: 12px;
line-height: 16px;
-webkit-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
-moz-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
-ms-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
-o-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3))
}
.date-picker-wrapper .date-range-length-tip:after {
content: '';
position: absolute;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #ff0;
left: 50%;
margin-left: -4px;
bottom: -4px
}
.date-picker-wrapper.two-months.no-gap .month1 .next,
.date-picker-wrapper.two-months.no-gap .month2 .prev {
display: none
}
.date-picker-wrapper .week-number {
padding: 5px 0;
line-height: 1;
font-size: 12px;
margin-bottom: 1px;
color: #999;
cursor: pointer;
display:none;
}
.day.toMonth.valid div[style="padding:0 5px;"]{
padding:-1px !important;
}
.date-picker-wrapper .week-number.week-number-selected {
color: #49e;
font-weight: 700
}
.day.toMonth.valid div span,.day.toMonth.invalid div span {
font-weight: normal !important;
display: block;
margin-bottom: 12px;
font-size: 15px;
}
.day.toMonth.valid div span+div {
background: #4D5567;
color: #FFF;
opacity: 1 !important;
padding:7px 5px;
}
.day.toMonth.invalid div span{
opacity: 1 !important;
padding:7px 5px;
}
.week-name th:first-child{
color:transparent !important;
}
.day.toMonth.valid:hover {
background-color:#4499EE !important;
color: #fff !important
}
.date-picker-wrapper .month-wrapper table .checked {
background-color: #9cdbf7 !important;
}
.date-picker-wrapper.date-range-picker19 .day.first-date-selected { background-color: #4499EE !important;color:#FFF !important; }
.date-picker-wrapper.date-range-picker19 .day.last-date-selected { background-color: #4499EE !important; color:#FFF !important;}
.fa-blok{
display:inline;
color:#FFF !important;
text-decoration: none !important;
}
#media screen and (max-width: 660px) {
.date-picker-wrapper .month-wrapper table .day.toMonth.valid,.date-picker-wrapper .month-wrapper table .day.toMonth.invalid{
padding:8px;
}
.month1{
margin-bottom: 0px;
}
.date-picker-wrapper .month-wrapper table{
width:100%;
margin-right: 0;
float:none;
}
.date-picker-wrapper .month-wrapper table td, .date-picker-wrapper .month-wrapper table th{
font-size: 12px;
}
}
#media screen and (max-width: 490px) {
.day.toMonth.valid div span, .day.toMonth.invalid div span{
font-size: 12px;
margin-bottom: 7px;
}
.day.toMonth.valid div span+div{
padding:3px 2px;
}
.date-picker-wrapper .month-wrapper{
padding:0;
}
}
#media screen and (max-width: 446px) {
.day.toMonth.valid div span+div{
padding:3px 0;
}
.day.toMonth.valid div span, .day.toMonth.invalid div span{
font-size: 11px;
}
}
#media screen and (max-width: 400px) {
.date-picker-wrapper .month-wrapper table .day.toMonth.valid, .date-picker-wrapper .month-wrapper table .day.toMonth.invalid{
padding:5px 5px;
}
}
#media screen and (max-width: 320px) {
.day.toMonth.valid div span, .day.toMonth.invalid div span{
font-size: 10px;
margin-bottom: 12px;
}
.date-picker-wrapper .month-wrapper table .day.toMonth.valid, .date-picker-wrapper .month-wrapper table .day.toMonth.invalid{
padding:2px 0;
}
.day.toMonth.valid div span+div{
font-size: 11px;
}
}
.reserved{
position: relative;
overflow: hidden;
}
.reserved:before{
content: "";
display: block;
position: absolute;
z-index: 10;
background: #551A62;
opacity: 0.7;
width: 100%;
height: 56%;
top: -4px;
transform: rotate(116deg);
overflow: hidden;
left: -43px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-date-range-picker/0.16.1/daterangepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-date-range-picker/0.16.1/jquery.daterangepicker.min.js"></script>
<input type="hidden" id="date-range12" size="40" value="">
<div id="date-range12-container" style="width:100%;"></div>
Live Demo

You can use showDateFilter method to identify the dates where you want to add custom class. Please see exaple below. Here dates that needs to be highlighted are in highlightdates array.
Please note that showDateFilter filter is executed to identify the content of each date cell in the calendar.
var highlightdates = [moment('22.12.2017', 'DD.MM.YYYY'), moment('24.01.2018', 'DD.MM.YYYY')]
$(document).ready(function () {
$('#date-range12').dateRangePicker(
{
inline: true,
container: '#date-range12-container',
alwaysOpen: true,
format: 'DD.MM.YYYY',
separator: ' to ',
language: 'tr',
showTopbar: false,
showWeekNumbers: false,
extraClass: 'date-range-picker19',
monthSelect: true,
yearSelect: true,
customArrowPrevSymbol: '',
customArrowNextSymbol: '',
//maxDays: 7,
//minDays: 3,
startDate: moment(),
startOfWeek: 'monday',
customTopBar: 'Tarih Aralığı Seçiniz',
showDateFilter: function (time, date) {
var doHighlight = highlightdates.some(function(item) {
return (item.isSame(moment(time), 'day') && item.isSame(moment(time), 'month') && item.isSame(moment(time), 'year'))
})
return '<div ' + (doHighlight ? 'class="highlight"' : '') + ' style="padding:0 5px;">\
<span style="font-weight:bold">'+ date + '</span>\
<div style="opacity:0.3;">$'+ Math.round(Math.random() * 999) + '</div>\
</div>';
}
});
});
.highlight {
background-color: red;
}
.date-picker {
width: 170px;
height: 25px;
padding: 0;
border: 0;
line-height: 25px;
padding-left: 10px;
font-size: 12px;
font-family: Arial, sans-serif;
font-weight: 700;
cursor: pointer;
color: #303030;
position: relative;
z-index: 2
}
.date-picker-wrapper {
position: absolute;
z-index: 1;
//border: 1px solid #bfbfbf;
background-color: #efefef;
//padding: 5px 12px;
font-size: 12px;
line-height: 20px;
color: #aaa;
font-family: Arial, sans-serif;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
-webkit-box-sizing: initial;
box-sizing: initial
}
.dp-clearfix {
clear: both;
height: 0;
font-size: 0
}
.date-picker-wrapper.inline-wrapper {
position: relative;
-webkit-box-shadow: none;
box-shadow: none;
display: inline-block
}
.date-picker-wrapper.single-date {
width: auto
}
.date-picker-wrapper.no-shortcuts {
//padding-bottom: 12px
}
.date-picker-wrapper.no-topbar {
//padding-top: 12px
}
.date-picker-wrapper .footer {
font-size: 11px;
//padding-top: 3px
}
.date-picker-wrapper b {
color: #666;
font-weight: 700
}
.date-picker-wrapper a {
color: #6bb4d6;
text-decoration: underline
}
.date-picker-wrapper .month-name {
text-transform: uppercase
}
.date-picker-wrapper .select-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
vertical-align: middle
}
.date-picker-wrapper .select-wrapper:hover {
text-decoration: underline
}
.date-picker-wrapper .month-element {
display: inline-block;
vertical-align: middle
}
.date-picker-wrapper .select-wrapper select {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: -1px;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
text-transform: inherit;
color: inherit;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: 0 0;
border: 0;
outline: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
opacity: .01
}
.date-picker-wrapper .month-wrapper {
border: 1px solid #bfbfbf;
//border-radius: 3px;
//background-color: #fff;
background-color: #d0d5de;
padding: 12px 12px 40px 12px;
cursor: default;
position: relative;
_overflow: hidden;
width:100% !important;
}
.date-picker-wrapper .month-wrapper table {
width: 190px;
float: left;
margin-right:20px;;
}
.date-picker-wrapper .month-wrapper table.month2 {
width: 190px;
float: left
}
.date-picker-wrapper .month-wrapper table td,
.date-picker-wrapper .month-wrapper table th {
vertical-align: middle;
text-align: center;
line-height: 14px;
margin: 0;
padding: 0;
color:#FFF;
font-weight: normal;
font-size: 14px;
}
.date-picker-wrapper .month-wrapper table .day {
//padding: 5px 0;
//line-height: 1;
//font-size: 12px;
//margin-bottom: 1px;
//color: #ccc;
//cursor: default;
line-height: 1;
font-size: 12px;
color: #ccc;
cursor: not-allowed;
padding: 15px;
border: 1px solid #eee;
background: #f0f0f0;
}
.date-picker-wrapper .month-wrapper table div.day.lastMonth,
.date-picker-wrapper .month-wrapper table div.day.nextMonth {
color: #999;
cursor: default
}
.date-picker-wrapper .month-wrapper table .week-name {
height: 40px;
line-height: 20px;
font-weight: 100;
text-transform: uppercase;
}
.date-picker-wrapper .month-wrapper table .day.has-tooltip {
cursor: help!important
}
.date-picker-wrapper .month-wrapper table .day.has-tooltip .tooltip {
white-space: nowrap
}
.date-picker-wrapper .time label {
white-space: nowrap;
}
.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
color: #333;
cursor: pointer;
padding: 15px;
border: 1px solid #eee;
background: #FFF;
}
.date-picker-wrapper .month-wrapper table .day.lastMonth,
.date-picker-wrapper .month-wrapper table .day.nextMonth {
display: none
}
.date-picker-wrapper .month-wrapper table .day.real-today {
background-color: #ffe684
}
.date-picker-wrapper .month-wrapper table .day.real-today.checked,
.date-picker-wrapper .month-wrapper table .day.real-today.hovering {
background-color: #70ccd5
}
.date-picker-wrapper table .caption {
height: 40px;
background-color: #4d5567;
color: #CBCDD0;
padding: 13px 0px;
font-size: 15px;
text-align: center;
}
.date-picker-wrapper table .caption>th:first-of-type,
.date-picker-wrapper table .caption>th:last-of-type {
width: 27px;
}
.date-picker-wrapper table .caption .next,
.date-picker-wrapper table .caption .prev {
width:50px;
height:40px;
line-height:40px;
vertical-align: middle;
display:block;
cursor: pointer;
background:#667493;
}
.caption .next{
float:right;
}
.date-picker-wrapper table .caption .next:hover,
.date-picker-wrapper table .caption .prev:hover {
background-color: #ccc;
color: #fff
}
.date-picker-wrapper .gap {
position: relative;
z-index: 1;
width: 15px;
height: 100%;
background-color: red;
font-size: 0;
line-height: 0;
float: left;
top: -5px;
margin: 0 10px -10px;
visibility: hidden;
height: 0;
display:none;
}
.date-picker-wrapper .gap .gap-lines {
height: 100%;
overflow: hidden
}
.date-picker-wrapper .gap .gap-line {
height: 15px;
width: 15px;
position: relative
}
.date-picker-wrapper .gap .gap-line .gap-1 {
z-index: 1;
height: 0;
border-left: 8px solid #fff;
border-top: 8px solid #eee;
border-bottom: 8px solid #eee
}
.date-picker-wrapper .gap .gap-line .gap-2 {
position: absolute;
right: 0;
top: 0;
z-index: 2;
height: 0;
border-left: 8px solid transparent;
border-top: 8px solid #fff
}
.date-picker-wrapper .gap .gap-line .gap-3 {
position: absolute;
right: 0;
top: 8px;
z-index: 2;
height: 0;
border-left: 8px solid transparent;
border-bottom: 8px solid #fff
}
.date-picker-wrapper .gap .gap-top-mask {
width: 6px;
height: 1px;
position: absolute;
top: -1px;
left: 1px;
background-color: #eee;
z-index: 3
}
.date-picker-wrapper .gap .gap-bottom-mask {
width: 6px;
height: 1px;
position: absolute;
bottom: -1px;
left: 7px;
background-color: #eee;
z-index: 3
}
.date-picker-wrapper .selected-days {
display: none
}
.date-picker-wrapper .drp_top-bar {
line-height: 1.4;
position: relative;
padding: 10px 40px 10px 0
}
.date-picker-wrapper .drp_top-bar .error-top,
.date-picker-wrapper .drp_top-bar .normal-top {
display: none
}
.date-picker-wrapper .drp_top-bar .default-top {
display: block
}
.date-picker-wrapper .drp_top-bar.error .default-top {
display: none
}
.date-picker-wrapper .drp_top-bar.error .error-top {
display: block;
color: red
}
.date-picker-wrapper .drp_top-bar.normal .default-top {
display: none
}
.date-picker-wrapper .drp_top-bar.normal .normal-top {
display: block
}
.date-picker-wrapper .drp_top-bar.normal .normal-top .selection-top {
color: #333
}
.date-picker-wrapper .drp_top-bar .apply-btn {
position: absolute;
right: 0;
top: 6px;
padding: 3px 5px;
margin: 0;
font-size: 12px;
border-radius: 4px;
cursor: pointer;
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
color: #fff;
line-height: initial
}
.date-picker-wrapper .drp_top-bar .apply-btn.disabled {
cursor: pointer;
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')
}
.date-picker-wrapper .time {
position: relative
}
.date-picker-wrapper.single-month .time {
display: block
}
.date-picker-wrapper .time input[type=range] {
vertical-align: middle;
width: 129px;
padding: 0;
margin: 0;
height: 20px
}
.date-picker-wrapper .time1 {
width: 180px;
padding: 0 5px;
text-align: center
}
.time2 {
width: 180px;
padding: 0 5px;
text-align: center
}
.date-picker-wrapper .time1 {
float: left
}
.date-picker-wrapper .time2 {
float: right
}
.date-picker-wrapper .hour {
text-align: right
}
.minute {
text-align: right
}
.date-picker-wrapper .hide {
display: none
}
.date-picker-wrapper .date-range-length-tip {
position: absolute;
margin-top: -4px;
margin-left: -8px;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
display: none;
background-color: #ff0;
padding: 0 6px;
border-radius: 2px;
font-size: 12px;
line-height: 16px;
-webkit-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
-moz-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
-ms-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
-o-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3))
}
.date-picker-wrapper .date-range-length-tip:after {
content: '';
position: absolute;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #ff0;
left: 50%;
margin-left: -4px;
bottom: -4px
}
.date-picker-wrapper.two-months.no-gap .month1 .next,
.date-picker-wrapper.two-months.no-gap .month2 .prev {
display: none
}
.date-picker-wrapper .week-number {
padding: 5px 0;
line-height: 1;
font-size: 12px;
margin-bottom: 1px;
color: #999;
cursor: pointer;
display:none;
}
.day.toMonth.valid div[style="padding:0 5px;"]{
padding:-1px !important;
}
.date-picker-wrapper .week-number.week-number-selected {
color: #49e;
font-weight: 700
}
.day.toMonth.valid div span,.day.toMonth.invalid div span {
font-weight: normal !important;
display: block;
margin-bottom: 12px;
font-size: 15px;
}
.day.toMonth.valid div span+div {
background: #4D5567;
color: #FFF;
opacity: 1 !important;
padding:7px 5px;
}
.day.toMonth.invalid div span{
opacity: 1 !important;
padding:7px 5px;
}
.week-name th:first-child{
color:transparent !important;
}
.day.toMonth.valid:hover {
background-color:#4499EE !important;
color: #fff !important
}
.date-picker-wrapper .month-wrapper table .checked {
background-color: #9cdbf7 !important;
}
.date-picker-wrapper.date-range-picker19 .day.first-date-selected { background-color: #4499EE !important;color:#FFF !important; }
.date-picker-wrapper.date-range-picker19 .day.last-date-selected { background-color: #4499EE !important; color:#FFF !important;}
.fa-blok{
display:inline;
color:#FFF !important;
text-decoration: none !important;
}
#media screen and (max-width: 660px) {
.date-picker-wrapper .month-wrapper table .day.toMonth.valid,.date-picker-wrapper .month-wrapper table .day.toMonth.invalid{
padding:8px;
}
.month1{
margin-bottom: 0px;
}
.date-picker-wrapper .month-wrapper table{
width:100%;
margin-right: 0;
float:none;
}
.date-picker-wrapper .month-wrapper table td, .date-picker-wrapper .month-wrapper table th{
font-size: 12px;
}
}
#media screen and (max-width: 490px) {
.day.toMonth.valid div span, .day.toMonth.invalid div span{
font-size: 12px;
margin-bottom: 7px;
}
.day.toMonth.valid div span+div{
padding:3px 2px;
}
.date-picker-wrapper .month-wrapper{
padding:0;
}
}
#media screen and (max-width: 446px) {
.day.toMonth.valid div span+div{
padding:3px 0;
}
.day.toMonth.valid div span, .day.toMonth.invalid div span{
font-size: 11px;
}
}
#media screen and (max-width: 400px) {
.date-picker-wrapper .month-wrapper table .day.toMonth.valid, .date-picker-wrapper .month-wrapper table .day.toMonth.invalid{
padding:5px 5px;
}
}
#media screen and (max-width: 320px) {
.day.toMonth.valid div span, .day.toMonth.invalid div span{
font-size: 10px;
margin-bottom: 12px;
}
.date-picker-wrapper .month-wrapper table .day.toMonth.valid, .date-picker-wrapper .month-wrapper table .day.toMonth.invalid{
padding:2px 0;
}
.day.toMonth.valid div span+div{
font-size: 11px;
}
}
.reserved{
position: relative;
overflow: hidden;
}
.reserved:before{
content: "";
display: block;
position: absolute;
z-index: 10;
background: #551A62;
opacity: 0.7;
width: 100%;
height: 56%;
top: -4px;
transform: rotate(116deg);
overflow: hidden;
left: -43px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>jQuery Date Range Picker Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-date-range-picker/0.16.1/daterangepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-date-range-picker/0.16.1/jquery.daterangepicker.min.js"></script>
</head>
<body>
<input type="hidden" id="date-range12" size="40" value="">
<div id="date-range12-container" style="width:100%;"></div>
</body>
</html>

Mozilla FireFox hover works differently than in Chrome

I have custom dropdown. Mostly all work is done using css. This dropdown is open/close by adding removing ui-dropdown-expanded class
Here is all my code
$(document).on('click', '#ResponseFilter', function() {
$(this).find('ul').toggleClass('ui-dropdown-expanded');
});
.reviews-filter.ui-dropdown {
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: none;
background-origin: padding-box;
background-position-x: 0%;
background-position-y: 0%;
background-repeat-x: ;
background-repeat-y: ;
background-size: auto;
border-bottom-color: rgb(210, 210, 210);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(210, 210, 210);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(210, 210, 210);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(210, 210, 210);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(42, 100, 150);
cursor: pointer;
display: block;
float: left;
font-family: "Proxima Nova";
font-size: 14px;
font-stretch: normal;
font-style: normal;
font-variant-caps: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-weight: normal;
height: 30px;
line-height: 20px;
margin-bottom: 7px;
margin-left: 0px;
margin-right: 10px;
margin-top: 7px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
padding-top: 6px;
position: relative;
text-size-adjust: 100%;
vertical-align: baseline;
width: 200px;
word-break: keep-all;
word-wrap: break-word;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ui-dropdown:hover {
cursor: pointer;
}
.ui-dropdown {
background: #2D72A7;
color: #fff;
padding: 6px 10px;
margin: 7px 10px 7px 0;
border: 1px solid #2D72A7;
border-radius: 3px;
position: relative;
font-size: 14px;
}
.fl {
float: left !important;
}
.fr {
padding-top: 0;
float: right !important;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
margin-top: -1px;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li,
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
background: #fff;
border: 0;
color: #2a6496;
}
.ui-dropdown:hover ul.ui-dropdown-expanded {
display: block;
background: #1a4d74;
color: #fff;
position: absolute;
left: -1px;
right: -1px;
top: 31px;
border: 1px solid #113958;
text-align: center;
box-shadow: 0 2px rgba(0, 0, 0, 0.15);
}
.ui-dropdown ul {
display: none;
z-index: 2;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li {
border-left: 1px solid #D2D2D2;
border-right: 1px solid #D2D2D2;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li,
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
background: #fff;
border: 0;
color: #2a6496;
}
.ui-dropdown:hover ul.ui-dropdown-expanded li {
border-bottom: 1px solid #113958;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li label {
color: #2a6496;
text-align: left;
display: block;
padding: 0 10px;
line-height: 22px;
text-transform: none;
font-size: 14px;
}
.ui-dropdown:hover ul.ui-dropdown-expanded li label {
padding-top: 10px;
padding-bottom: 10px;
color: #000;
margin: 0;
cursor: pointer;
}
.ui-dropdown ul li label {
font-weight: normal;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ResponseFilter" class="ui-dropdown fl reviews-filter" style="width: 200px;">
<div class="fl">
<span id="response-filter-selected-value">All Responses Types</span>
</div>
<div class="fr" data-filter="response">
<i class="fa fa-caret-down"></i>
<ul class="ui-dropdown-expanded">
<li>
<label for="response-filter-allresponsetypes">All Responses Types</label>
</li>
<li>
<label for="response-filter-postedresponses">Posted Responses</label>
</li>
<li>
<label for="response-filter-responserequired">Response Required</label>
</li>
</ul>
</div>
</div>
In snippet, it's a bit different than in jsFiddle (don't know why cause code the same)
So problem - in FF especially there is some space between dropdown button and dropdown list, that make dropdown closed, cause user lost :hover:
On images, there are pointers where user can see dropdown list and not...
Is this issue because of margin, padding or what?
Thanks.

Well, issue was because of 1px of margin.
Moving dropdown list a bit higher adding -1px; to existing margin to class ui-dropdown-expanded solve my problem.
$(document).on('click', '#ResponseFilter', function() {
$(this).find('ul').toggleClass('ui-dropdown-expanded');
});
.reviews-filter.ui-dropdown {
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: none;
background-origin: padding-box;
background-position-x: 0%;
background-position-y: 0%;
background-repeat-x: ;
background-repeat-y: ;
background-size: auto;
border-bottom-color: rgb(210, 210, 210);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(210, 210, 210);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(210, 210, 210);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(210, 210, 210);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(42, 100, 150);
cursor: pointer;
display: block;
float: left;
font-family: "Proxima Nova";
font-size: 14px;
font-stretch: normal;
font-style: normal;
font-variant-caps: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-weight: normal;
height: 30px;
line-height: 20px;
margin-bottom: 7px;
margin-left: 0px;
margin-right: 10px;
margin-top: 7px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
padding-top: 6px;
position: relative;
text-size-adjust: 100%;
vertical-align: baseline;
width: 200px;
word-break: keep-all;
word-wrap: break-word;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ui-dropdown:hover {
cursor: pointer;
}
.ui-dropdown {
background: #2D72A7;
color: #fff;
padding: 6px 10px;
margin: 7px 10px 7px 0;
border: 1px solid #2D72A7;
border-radius: 3px;
position: relative;
font-size: 14px;
}
.fl {
float: left !important;
}
.fr {
padding-top: 0;
float: right !important;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
margin-top: -1px;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li,
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
background: #fff;
border: 0;
color: #2a6496;
}
.ui-dropdown:hover ul.ui-dropdown-expanded {
display: block;
background: #1a4d74;
color: #fff;
position: absolute;
left: -1px;
right: -1px;
top: 31px;
border: 1px solid #113958;
text-align: center;
box-shadow: 0 2px rgba(0, 0, 0, 0.15);
}
.ui-dropdown ul {
display: none;
z-index: 2;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li {
border-left: 1px solid #D2D2D2;
border-right: 1px solid #D2D2D2;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li,
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
background: #fff;
border: 0;
color: #2a6496;
}
.ui-dropdown:hover ul.ui-dropdown-expanded li {
border-bottom: 1px solid #113958;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li label {
color: #2a6496;
text-align: left;
display: block;
padding: 0 10px;
line-height: 22px;
text-transform: none;
font-size: 14px;
}
.ui-dropdown:hover ul.ui-dropdown-expanded li label {
padding-top: 10px;
padding-bottom: 10px;
color: #000;
margin: 0;
cursor: pointer;
}
.ui-dropdown ul li label {
font-weight: normal;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
margin-top: -2px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ResponseFilter" class="ui-dropdown fl reviews-filter" style="width: 200px;">
<div class="fl">
<span id="response-filter-selected-value">All Responses Types</span>
</div>
<div class="fr" data-filter="response">
<i class="fa fa-caret-down"></i>
<ul class="ui-dropdown-expanded">
<li>
<label for="response-filter-allresponsetypes">All Responses Types</label>
</li>
<li>
<label for="response-filter-postedresponses">Posted Responses</label>
</li>
<li>
<label for="response-filter-responserequired">Response Required</label>
</li>
</ul>
</div>
</div>

how to change the color of track for range slider?

I have to change the track color of range slider,I tried with css but in chrome it is not working,At last I find a solution using jquery(link),So I implemented,but I am not getting expected output.
Jquery:
$('.text-size-slider .slider').change(function () {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$(this).css('background-image',
'-webkit-gradient(linear, left top, right top, '
+ 'color-stop(' + val + ', #94A14E), '
+ 'color-stop(' + val + ', #C5C5C5)'
+ ')'
);
});
Here is my plunker:
https://plnkr.co/edit/yMg8bKSrbam6RmtgdBl4?p=preview
Is it possible with pure javascript or angularjs without using jquery,for jquery also it is not working as shown in plunker.
Expected output:
Any help would be appreciated.
Please any one help me.I tried alot but unable to get it.

I have updated your directive, you can check in this plunker
"https://plnkr.co/edit/UPh0guqcXxO6ivSljh8R?p=preview"

Replace style.css
body {
color: red;
font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
margin: 0;
}
header {
background-color: white;
padding: 60px 40px;
}
h1 {
font-size: 200%;
}
h3 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
}
p {
font-size: 90%;
font-weight: normal;
}
article {
-webkit-column-count: 4;
column-count: 4;
}
p {
margin: 0px;
}
/**
* Text Slider Directive - CSS
**/
.text-size-slider {
line-height: 100%;
font-size: 14px;
position: relative;
}
.text-size-slider .small-letter,.text-size-slider .big-letter
{
font-weight: bold;
}
.text-size-slider .slider {
-webkit-appearance: none;
margin: 0px 8px;
}
.text-size-slider .slider:focus {
outline: none;
}
.text-size-slider .slider::-webkit-slider-thumb {
border: none;
cursor: pointer;
-webkit-appearance: none;
background-color: rgba(192, 35, 74, 1);
width: 15px;
height: 15px;
border-radius: 50%;
margin-top: -6px;
}
.text-size-slider .slider::-moz-range-thumb {
border: none;
cursor: pointer;
-webkit-appearance: none;
background-color: rgba(192, 35, 74, 1);
width: 18px;
height: 18px;
border-radius: 50%;
margin-top: -6px;
}
.text-size-slider .slider::-ms-thumb {
border: none;
cursor: pointer;
-webkit-appearance: none;
background-color: rgba(192, 35, 74, 1);
width: 15px;
height: 15px;
border-radius: 50%;
margin-top: -6px;
}
.text-size-slider .slider::-webkit-slider-thumb::before {
content:"YEAH";
display:block;
background:red !important;
height:20px;
width:20px;
position:absolute;
top:-20px;
left:-10px;
}
.text-size-slider .slider::-webkit-slider-thumb::after {
content:"YEAH";
display:block;
background:green !important;
height:20px;
width:20px;
position:absolute;
top:-20px;
left:-10px;
}
.text-size-slider .slider::-moz-range-thumb::before {
content:"YEAH";
display:block;
background:rgba(192, 35, 74, 1);
height:20px;
width:20px;
position:absolute;
top:-20px;
left:-10px;
}
.pointer {
vertical-align:top;
height: 40px;
width: 40px;
border-radius:20px 20px 0 20px;
background-color:rgba(192, 35, 74, 1);
display:block;
transform: rotate(45deg);
position:absolute;
top: -39px;
margin-left:14px;
color:black;
}
.pointer span {
display: inline-block;
transform: rotate(-45deg);
margin-left:12px;
margin-top: 14px;
color:white;
}
.text-size-slider .slider::-webkit-slider-runnable-track {
width: 100%;
height: 2px;
cursor: pointer;
border: 0;
}
.text-size-slider .slider::-ms-track {
width: 100%;
height: 2px;
cursor: pointer;
background: yellow;
border: 0;
}
.text-size-slider .slider::-moz-range-track {
width: 100%;
height: 2px;
cursor: pointer;
background-color: #ddd;
border: 0;
}
.text-size-slider .slider::-moz-range-progress {
background-color: rgba(192, 35, 74, 1);
height: 2px;
}
.text-size-slider .slider::-webkit-progress-value {
background-color: orange;
}{
background-color: rgba(192, 35, 74, 1);
}
#-moz-document url-prefix() { .pointer { top: -40px; } }
.text-size-slider .slider::-ms-fill-lower {
background: yellow;
border-radius: 0;
}
.text-size-slider .slider::-ms-fill-upper {
background: black;
border-radius: 0;
}
.text-size-slider .slider{
-webkit-appearance: none;
-moz-apperance: none;
/*! border-radius: 6px; */
height: 0px;
background-image: -webkit-gradient( linear, left top, right top, color-stop(0.15, #ddd), color-stop(0.15, #ddd) );
}
.text-size-slider .slider::-webkit-slider-thumb {
-webkit-appearance: none !important;
background-color: #E9E9E9;
border: 1px solid #CECECE;
height: 15px;
width: 15px;
}

Categories