Question

我有一个带标签的输入框。标签位于输入框内。当输入框被聚焦时，我希望标签在输入框上方移动。

我认为我需要使用input：focus~label来在选择输入框时聚焦标签，但我无法使其工作。

HTML：

<div class="search-container">
  <form [formGroup]="SearchForm" (ngSubmit)="getWeatherFromCity(SearchForm.value)" name="SearchForm">
      <div class='city-input'>
      <label for="searchCity">City </label>
      <input class="form-input" formControlName="searchCity" id="searchCity">
    </div>
      <button class="button" title="Search">Search
      </button>
  </form>
</div>

的CSS：

.search-container{
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  margin: 20px;

  .city-input{
    position: relative;
    display: inline;
    input{
      border-radius: 10px;
      height: 2em;
      width: 17.5em;
      &:focus ~ label {
      transform: translateY(-30px);
      color: red
      }
    }
      label{
      transition: transform 0.5s;
      position: absolute;
      padding: 10px;
    }
  }

请告知。

干杯。

Answer 1

你不能只用css afaik选择一个前一个元素

你可以使用jQuery，有点...... demo

$( ".form-input" ).focus(function() {
  $(".form-input").prev("label").addClass("the-class-to-handle-the-transition");
});                     
$( ".form-input" ).focusout(function() {
  $(".form-input").prev("label").removeClass("the-class-to-handle-the-transition");
});

在悬停时将css应用于兄弟元素

1 个答案: