CSS-自定义鼠标图标

Posted 2023-04-15

参考技术A 解析：前面的url是自定义鼠标图标的路径，可以为相对/绝对路径。第二个参数是css标准的cursor样式。可换成其他属性（如pointer/crosshair/default/等）
注意：w3school推荐第二个参数必须定义一个普通的光标，以防止url定义的光标有备用选项。另外，IE下第二个参数可以省略。

自定义鼠标图标，需要注意以下几点:
① 图标的格式
IE支持cur,ani,ico这三种格式，FF支持bmp,gif,jpg,cur,ico这几种格式，不支持ani格式，也不支持gif动画格式，因此一般将url引用的图标存为ico或cur格式比较好。
② 图标的大小
鼠标图标的尺寸推荐32*32，否则可能出现大小不一致问题。

参考文章： 使用自定义的鼠标图标

Sencha Touch List 自定义披露图标

【中文标题】Sencha Touch List 自定义披露图标

【英文标题】：Sencha Touch List Custom Disclosure Icon

【发布时间】：2014-05-12 10:43:31

【问题描述】：

我有自定义图标显示为列表组件的披露图标。我做了CSS来做。我的图标颜色是灰色的。它显示为蓝色。

我的 CSS：

.myList .x-list-disclosure

    width:48px !important;
    height:48px !important;
    top:0px !important;
    margin:1em 0 0 0 !important;
    background-image:none !important;
    color:transparent !important;
    -webkit-mask-box-image:url('../resources/images/next.png') !important;
    -webkit-mask:none !important;


.x-list .x-list-disclosure:before 
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  content:'';
  font-family:$font-family;
  color:transparent;
  font-size:48px;
  text-align:center;
  line-height:48px;
  text-shadow:none !important;

问题：我的图标显示蓝色（即使是浅灰色）是什么原因 我使用的 CSS 有什么问题。

【参考方案1】：

这是因为，在 .x-list .x-list-disclosure 类的煎茶中，background-color 是 #006bb6。当您使用-webkit-mask-box-image 时，它是透明的，显示背景颜色，即蓝色而不是浅灰色。因此，如果您想更改图标的颜色，请执行以下操作：

.myList .x-list-disclosure 
    background-color: grey !important;

希望我的解释能满足您的查询。