浮動標簽不能與not(:placeholder-shown)一起正常作業-有解無憂

目前我正在實作一個簡單的浮動標簽。下面是一個示例。問題是，如果我在輸入中填寫了一些東西并失去焦點，標簽會留在它的位置并且not(:placeholder-shown)不被識別。為什么？

.k-textbox {
  display: flex;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  height: 35px;
  color: #3e5569;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #e9ecef;
  appearance: none;
  border-radius: 4px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-family: "Nunito Sans", sans-serif;
}

.x-floating {
  position: relative;
}

.x-floating-label {
  font-weight: 700;
}

.x-floating > .x-floating-label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  box-sizing: border-box;
}

.x-floating > .k-textbox:focus,
.x-floating > .k-textbox:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.x-floating > .k-textbox:focus ~ span,
.x-floating > .k-textbox:not(:placeholder-shown) ~ kendo-label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

<div class="x-floating">
        <input class="k-textbox" placeholder="&nbsp;"></input>
        <span  class="x-floating-label">Username</span>
      </div>

uj5u.com熱心網友回復：

我認為您應該在 css 的最后一個樣式中使用.x-floating-label而不是kendo-lable。

.k-textbox {
  display: flex;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  height: 35px;
  color: #3e5569;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #e9ecef;
  appearance: none;
  border-radius: 4px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-family: "Nunito Sans", sans-serif;
}

.x-floating {
  position: relative;
}

.x-floating-label {
  font-weight: 700;
}

.x-floating > .x-floating-label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  box-sizing: border-box;
}

.x-floating > .k-textbox:focus,
.x-floating > .k-textbox:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.x-floating > .k-textbox:focus ~ span,
.x-floating > .k-textbox:not(:placeholder-shown) ~ .x-floating-label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

<div class="x-floating">
        <input class="k-textbox" placeholder="&nbsp;"></input>
        <span  class="x-floating-label">Username</span>
      </div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/400622.html

標籤：html css

上一篇：CSS影片僅顯示在第一張幻燈片影像上

下一篇：設定聊天訊息的順序