在datetimepicker下拉窗口小部件中更改glyphicon图标颜色

时间:2015-07-23 19:16:40

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

我使用此gem来获取bootsrap datetimepicker。并使用以下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。下拉列表工作正常。但是,不会出现增加/减少分钟和小时的向上和向下箭头。这是因为颜色与背景相匹配。当我将鼠标悬停在它上面时,它周围的区域变为灰色,因此箭头保持白色但变得可见。上面链接中的相同图标显示正常。我该如何解决?

我无法悬停,然后在下拉消失时截取屏幕截图。我甚至无法检查元素,因为点击它会隐藏小部件。任何检查元素的建议也会受到欢迎。

1 个答案:

答案 0 :(得分:0)

颜色更改为#ff9900

.glyphicon {color: #ff9900 !important;}

添加自定义类,以便对某些类进行更改

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