我的日期选择器包含箭头“prev”和“next”。我想更改箭头周围的颜色(浅粉色)和箭头样式本身:
我正在使用下载的 Jquery UI css，我发现它包含文件夹“图像”中的照片，这些照片用于设置“上一个”和“下一个”按钮的样式:
![files in image folder]()[
所以我修改了我在 jQuery-ui.css 文件中找到的所有照片链接，以获取蓝色箭头而不是黄色箭头。我修改了这一行和其他类似的行，其中包含“图像”文件夹中带有黄色箭头的照片的 url:
.ui-icon,
.ui-widget-content .ui-icon {
background-image: url("images/ui-icons_228ef1_256x240.png");
}
我也曾尝试在 juery-ui.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;
}
但后来我的图标就完全消失了。
我还尝试更改按钮周围的浅粉色空间。我找到了它的颜色代码:#fef9e2 并搜索了 jQuery-ui.css 和其他我能找到的日历样式文件，但根本找不到这种颜色。
我做了一个简化版的尝试更改箭头按钮:
<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>所以我的问题是:
如何使用来自 Internet 的链接更改按钮图标(我不喜欢“图像”文件夹中的图标的颜色)，或为 jQuery 日期选择器日历按钮下载照片？
如何设置按钮周围浅粉色空间的样式？
最佳答案
我固定了箭头的大小、位置和旋转。我猜你的意思是那个粉红色焦点上的轮廓，所以我把它去掉了。
$(document).ready(function() {
$("#datepicker").datepicker();
});<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">
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
<style>
.ui-datepicker-prev span.ui-icon,
.ui-datepicker-next span.ui-icon {
background-image: url("https://cdn0.iconfinder.com/data/icons/flat-round-arrow-arrow-head/512/Red_Arrow_Right-512.png");
background-size: contain;
background-position: center;
}
.ui-datepicker-prev span.ui-icon {
transform: rotate(180deg);
}
.ui-datepicker-prev span.ui-icon:focus,
.ui-datepicker-next span.ui-icon:focus {
outline: none !important;
}
</style>
</head>
<body>
<input type="text" id="datepicker">
</body>
</html>关于javascript - 如何更改日期选择器的下一个和上一个箭头周围的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57443758/