reset css 代码片段

写给自己看快速reset css代码片段

由漆黑菌于 2023年12月08日发布

button

.base-button {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  appearance: none;
  -webkit-text-fill-color: currentcolor; // iOS 12以下文字显示会因为all: unset不能正确显示为color

  &:disabled {
    cursor: not-allowed;
  }

  a {
    text-decoration: none; // button下的a有下划线会很怪
  }

  * {
    -webkit-text-fill-color: currentcolor; // 兼容子元素
  }
}

input number

.base-input {
    all: unset;
    box-sizing: border-box;
    // 用于干掉浏览器中 input number 上下加减数字的辅助按钮 start
    appearance: none;
    -moz-appearance: textfield;

    &::-webkit-inner-spin-button {
        display: none;
    }
    // end

    -webkit-text-fill-color: currentcolor; // 同button类似的原因
}