Question

我正在重写剑道调度程序对事件（周围有一个圆圈的'！'）的重复符号，用下面的css圈出箭头：

.k-task>span.k-icon.k-i-warning {
        content: url('{!URLFOR($Asset.slds, "assets/icons/utility/sync.svg")}') !important;
        -webkit-filter: invert(100%);
        -moz-filter: invert(100%);
        -ms-filter: invert(100%);
        -o-filter: invert(100%);
    }
    .k-event>span.k-event-actions>span.k-icon.k-i-warning {
        content: url('{!URLFOR($Asset.slds, "assets/icons/utility/sync.svg")}') !important;
        margin-right: 10px;
        margin-top: -5px;
    }

这在Chrome中运行良好，但Firefox和Edge仍然显示为带圆圈的'！'。我尝试在每个之后执行:: after和::之前的事情，但这并没有真正起作用。

做之前::更换之前！带有旋转的箭头，但图标很大，设置宽度和高度以及字体大小等......没有改变图标的大小。

Chrome只是交换默认设置！我在内容中指定的图标，因此不需要进行其他大小的更改。

如何使用Firefox和Edge正确显示？

Answer 1

以这种方式试试

.k-task>span.k-icon.k-i-warning {
    width: 16px;
    height: 16px;
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -ms-filter: invert(100%);
    -o-filter: invert(100%);
}
.k-event>span.k-event-actions>span.k-icon.k-i-warning:after {        
    content: '';
    background-size: contain;
    background-position: center center;
    background-image: url('{!URLFOR($Asset.slds, "assets/icons/utility/sync.svg")}') !important;
    margin-right: 10px; /*I am not sure why you need these*/
    margin-top: -5px;/*I am not sure why you need these*/
}

Answer 2

另一种方法（假设您可以控制HTML）：在输入后添加一个空的右侧，并使用输入+ span在CSS中定位：

.field_with_errors {
  display: inline;
  color: red;
}
.field_with_errors input+span:after {
  content: "*"
}
<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
  <input type="text" /><span></span> 
</div>

我在AngularJS中使用这种方法，因为它会自动添加.ng-invalid类来形成元素和表单，但不会添加。

CSS内容：url（）与Firefox和Edge无法正常工作（即使使用:: before或:: after）

2 个答案: