I'm looking to customize the datepicker arrows in my UI. Specifically, I want to change the color surrounding the arrows and alter the arrow style itself:
https://i.sstatic.net/5y0UZ.png
I've been working with a downloaded jQuery UI CSS file that uses images from the "images" folder to style the "prev" and "next" buttons:
To achieve the desired effect, I edited the URLs in the jQuery-ui.css file to replace the yellow arrow images with blue ones. I modified lines like this:
.ui-icon,
.ui-widget-content .ui-icon {
background-image: url("images/ui-icons_228ef1_256x240.png");
}
I also attempted to directly change the arrow icons using custom CSS:
.ui-datepicker-prev span {
background-image: url(https://cdn0.iconfinder.com/data/icons/flat-round-arrow-arrow-head/512/Red_Arrow_Right-512.png) !important;
background-position: 0px 0px !important;
}
.ui-datepicker-next span {
background-image: url(https://cdn0.iconfinder.com/data/icons/flat-round-arrow-arrow-head/512/Red_Arrow_Right-512.png) !important;
background-position: 0px 0px !important;
}
Unfortunately, my attempts resulted in the icons disappearing altogether.
I also tried to change the light pink color around the buttons (color code: #fef9e2), but couldn't locate it in any of the CSS files I searched through.
In an effort to keep things simple, I created a basic HTML structure to update the arrow buttons:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(document).ready(function(){
$( "#datepicker" ).datepicker();
});
</script>
<style>
.ui-widget-header .ui-icon {
background-image: url("https://cdn0.iconfinder.com/data/icons/flat-round-arrow-arrow-head/512/Red_Arrow_Right-512.png");
}
</style>
</head>
<body>
<input type = "text" id = "datepicker">
</body>
</html>My questions are:
How can I change the button icons using an external link or by downloading an image for the jQuery date picker calendar buttons?
What is the best way to style the light pink space around the buttons?