SASS:文本输入无法启用按钮样式

时间:2018-09-19 17:11:42

标签: sass pseudo-class

因此,我有一个搜索按钮,当用户输入订单号和电子邮件地址之类的输入时,其样式应会更改,但这不会发生。

我无法通过问题所在的控制台成功识别。在开发版本中,它可以成功运行并采用以下样式:

@import '../global/style_elements.scss';
@import '../global/constants.scss';
@import '../global/fonts.scss';

button {
  font-family: $font-family;
}

.saved-for-later .submit-button,
.address-modal .submit-button,
.lookup-modal .submit-button,
.payment-modal .submit-button,
.payment-select-modal .submit-button,
.subscription-modal .submit-button,
.checkout-step .right-col a.next-step-btn,
.link-btn,
.checkout-modal a,
.checkout-modal .submit-button {
  font-size: 1em;
  line-height: 1.31;
  letter-spacing: 0.4px;
  @include font-bold;
  text-transform: capitalize;
  display: block;
  // Fix for 1px shifting bug in Chrome:
  // https://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
  transform: translateZ(0);
}

.checkout-step .right-col a:not(.next-step-btn .v-
) {
  @include bottom-border-link;
}

.link-btn {
  display: inline;
  &:focus {
    outline: -webkit-focus-ring-color auto 5px;
  }
}

.saved-for-later .submit-button,
.address-modal .submit-button,
.lookup-modal .submit-button,
.payment-modal .submit-button,
.payment-select-modal .submit-button,
.subscription-modal .submit-button,
.checkout-step .right-col .next-step-btn,
.link-btn,
.checkout-modal a,
.checkout-modal .submit-button {
  transition: opacity 0.3s ease;
  background-color: $base-button-color;
  color: $base-font-inverted-color;
  text-align: center;
  padding: 15px;
  border: 0;
  border-radius: $border-radius-default;
  cursor: pointer;
  opacity: 1;

  &:not([disabled]):hover {
    opacity: 0.7;
  }

  &[disabled] {
    background-color: $lighter-gray;
    cursor: default;
  }

  &:hover {
    outline: 0;
  }

  &:focus {
    outline-offset: 1px;
  }

  &:-moz-focusring {
    outline-color: black;
  }
}

因此,当该人输入其凭据时,应该启用该功能,但这没有发生,我不清楚原因。

这是一个React-Redux应用程序。

任何人都可以提供一些调试工具来确定可能是什么问题吗?

0 个答案:

没有答案