在 datetimepicker 下拉小部件中更改字形图标颜色答案

【问题标题】：Change glyphicon icon color inside a datetimepicker dropdown widget在 datetimepicker 下拉小部件中更改字形图标颜色
【发布时间】：2015-07-23 19:16:39
【问题描述】：

我正在使用这个gem 来获取引导日期时间选择器。并使用以下 HTML 代码将其合并：

<div  id="custom-dates" style=" clear:both;">
<div class="container">
<div class="row">
<div class='col-md-3 col-xs-3'>
    <div class="form-group">
            <b>From:</b>
         <div class='input-group date' id='datetimepicker6'>
            <input type='text' class="form-control" style="margin: 0px !important;" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>
<div class='col-md-3 col-xs-3'>
    <div class="form-group">
        <b>To:</b>
        <div class='input-group date' id='datetimepicker7'>
            <input type='text' class="form-control"  style="margin: 0px !important;"/>
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar" style="top:0;">
                </span>
            </span>
        </div>
    </div>
</div>

同理：https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers。下拉菜单工作正常。但是，不会出现递增/递减分钟和小时的向上和向下箭头。这是因为颜色与背景相匹配。当我将鼠标悬停在它上面时，它周围的区域变为灰色，因此箭头保持白色但变得可见。上面链接中的相同图标看起来很好。我该如何解决？

当下拉菜单消失时，我无法悬停然后截屏。我什至无法检查元素，因为单击它会隐藏小部件。任何检查该元素的建议也将受到欢迎。

【问题讨论】：

你能创建一个当前输出的演示吗？
我认为你可以检查这个：eonasdan.github.io/bootstrap-datetimepicker/#inline 而不是链接选择器，或者运行这个脚本：$('.input-group-addon').on('click', function() { console.log($('.bootstrap-datetimepicker-widget').html());}); ，那么请再次显示您的问题。

标签： javascript html css ruby-on-rails twitter-bootstrap

【解决方案1】：

将颜色改为#ff9900:

.glyphicon {color: #ff9900 !important;}

添加一个自定义类，例如对某些类进行更改

.myclass .glyphicon {color: #ff9900 !important;}

【讨论】：