如何更改日期选择器的下一个和上一个箭头周围的颜色？答案

【问题标题】：How to change color around the next and prev arrows for datepicker?如何更改日期选择器的下一个和上一个箭头周围的颜色？
【发布时间】：2019-08-10 16:14:09
【问题描述】：

我拥有的日期选择器包含箭头“prev”和“next”。我想更改箭头周围的颜色（浅粉色）和箭头样式本身：

我正在使用下载的 Jquery UI css，我发现它包含文件夹“images”中的照片，这些照片用于设置“prev”和“next”按钮的样式：

所以我修改了我在 jQuery-ui.css 文件中找到的所有照片链接，以获得蓝色箭头而不是黄色箭头。我修改了这一行和其他类似的行，其中包含“图像”文件夹中带有黄色箭头的照片的网址：

.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 日期选择器日历按钮的照片？
如何设计按钮周围的浅粉色空间？

【问题讨论】：

使用 sn-p 功能将code 添加到您的问题中。
嗨，刚刚添加了一个简化的 sn-p :)
这是一个 CSS border。使用 JavaScript 将 mouseover mouseout 事件侦听器附加到所有这些按钮。该事件侦听器的 this 可用于附加到您选择的兄弟元素或父元素，您将执行 .classList.add('my-border') 和 .classList.remove...
你的意思是这样的？？ jsfiddle.net/z3n27fte 什么都没发生。对不起，我真的不明白你的答案。我还不是最有经验的程序员:)
感谢@RonRoyston 的努力，但 Mohrn 已经回答了，并且可以正常工作:)

标签： javascript jquery html css datepicker

【解决方案1】：

我固定了箭头的大小、位置和旋转。我猜你的意思是粉红色的焦点轮廓，所以我删除了它。

$(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>

【讨论】：

太棒了！完美地工作！我衷心感谢你！正是我想要的:)