css - 如何切换搜索表单纯CSS

Question

我有一个搜索图标，单击该图标时，我想向左滑动搜索框。现在，我似乎无法仅使用CSS来使切换工作。

.search-toggle>input[type=text] {
      width: 130px;
      box-sizing: border-box;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      background-color: #ec2029;
      background-repeat: no-repeat;
      padding: 12px 20px 12px 40px;
      -webkit-transition: width 0.4s ease-in-out;
      transition: width 0.4s ease-in-out;
    }

    .search-toggle>input[type=text]:focus {
      width: 270px;
    }

    .btn--expand-icon svg {
      -webkit-transform: scale(1);
      transform: scale(1);
      transition: -webkit-transform .25s ease-in;
      transition: transform .25s ease-in;
      transition: transform .25s ease-in, -webkit-transform .25s ease-in
     }

    .btn--expand-icon:focus svg,
    .btn--expand-icon:hover svg {
      -webkit-transform: scale(1.25);
      transform: scale(1.25)
    }

 <button type="button" title="" class="search-toggle btn btn--unstyled btn--expand-icon">
            <span class="visually--hidden">Launch Global Search Dialog</span>
            <input class="visually--hidden" type="text" name="search" placeholder="Search..">
            <svg role="presentation" width="30" height="30" viewBox="0 0 1000 1000">
            <path fill="currentColor" stroke="currentColor" d="M990.6 945.7L732.3 691.6c67.7-73.5 109.2-170.7 109.2-277.5C841.5 185.3 653.1 0 420.8 0 188.3 0 0 185.3 0 414.1c0 228.6 188.3 414.1 420.8 414.1 100.3 0 192.5-34.8 264.8-92.5l259.2 255c12.7 12.4 33.1 12.4 45.8 0 12.7-12.5 12.7-32.6 0-45zM420.8 764.4C224 764.4 64.7 607.5 64.7 414.1 64.7 220.6 224 63.6 420.8 63.6c196.6 0 355.9 157 355.9 350.5 0 193.4-159.3 350.3-355.9 350.3z"></path>
            </svg>
        </button>

搜索图标位于我最右侧的主导航中。我希望当单击图标时使搜索框向左滑动，但是现在单击图标时什么也没有发生。

Answer 1

您可以将搜索图标包装在label中，并为搜索输入分配for属性。另外，您需要为输入分配一个id，以便标签可以将其定位。

.search-toggle>input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  background-color: #ec2029;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

.search-toggle>input[type=text]:focus {
  width: 270px;
}

.btn--expand-icon svg {
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: -webkit-transform .25s ease-in;
  transition: transform .25s ease-in;
  transition: transform .25s ease-in, -webkit-transform .25s ease-in
 }

.btn--expand-icon:focus svg,
.btn--expand-icon:hover svg {
  -webkit-transform: scale(1.25);
  transform: scale(1.25)
}

<button type="button" title="" class="search-toggle btn btn--unstyled btn--expand-icon">
	<span class="visually--hidden">Launch Global Search Dialog</span>
	<!-- assign an id for the input -->
	<input class="visually--hidden" type="text" id="search" name="search" placeholder="Search.." />
	<!-- wrap the icon in a label, set "for" for the input -->
	<label for="search">
		<svg role="presentation" width="30" height="30" viewBox="0 0 1000 1000">
			<path fill="currentColor" stroke="currentColor" d="M990.6 945.7L732.3 691.6c67.7-73.5 109.2-170.7 109.2-277.5C841.5 185.3 653.1 0 420.8 0 188.3 0 0 185.3 0 414.1c0 228.6 188.3 414.1 420.8 414.1 100.3 0 192.5-34.8 264.8-92.5l259.2 255c12.7 12.4 33.1 12.4 45.8 0 12.7-12.5 12.7-32.6 0-45zM420.8 764.4C224 764.4 64.7 607.5 64.7 414.1 64.7 220.6 224 63.6 420.8 63.6c196.6 0 355.9 157 355.9 350.5 0 193.4-159.3 350.3-355.9 350.3z"></path>
		</svg>
	</label>
</button>