文章/答案/技术大牛

发布

社区首页 >问答首页 >css在单击时更改占位符(没有js)

问css在单击时更改占位符(没有js)
EN

Stack Overflow用户

提问于 2020-12-18 00:03:56

回答 1查看 62关注 0票数 0

我正在尝试实现一个文本栏。必须是这样的：

关于使用的语言，你只需要知道它是从右向左写的。输入元素中的文本是一个占位符。当我单击文本框(而不是放大镜图标)时，它会变成这样：

请注意，放大镜图标已经消失，整个区域现在都可以输入了。我想用CSS实现它，而不是javascript。我试图将放大镜的svg元素添加到输入的占位符属性中，但失败了。现在，我已经实现了第二个形状(在单击之后)，但它没有响应，也没有放大镜svg作为占位符。

作为对我的代码的简要解释，我为整个容器提供了一个大div，它是一个列flex，一个顶部div，其中顶部标题在那里，我给出了它的下边界。和输入栏。这就是我所实现的：

顺便说一下，我可以访问svg元素：

<svg data-v-027aed6c="" xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="position-absolute search-icon text-steel feather feather-search"><circle data-v-027aed6c="" cx="11" cy="11" r="8"></circle><line data-v-027aed6c="" x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>

我可以把它添加到我的输入文本栏的右边，但是我不知道如何在没有js的情况下让它响应。

css

svg

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-12-18 01:01:00

您要查找的选择器是:placeholder-shown。它适用于除v79之前的边缘之外的所有浏览器，对于IE，您可以使用:-ms-placeholder-shown形式的前缀。(我将把完整的样式留给您。)

这里唯一需要注意的是，按照源代码顺序，<svg>需要紧跟在<input>元素之后。在RTL写入模式下，这可能意味着您需要重新排序这两个文件，例如使用flex order属性。

span {
  display: flex;
  align-content: stretch;
  height: 2em;  
  direction: rtl;
}
input[type="text"] {
  order:2;
  height: 2em;
  border: 1px solid #666;
  margin: 0;
  box-sizing: border-box;
}
svg {
  order: 1;
  width: 2em;
  height: 2em;
  border: 1px solid #666;
  border-left: none;
  padding: 4px;
  box-sizing: border-box;
}
input[type="text"] + svg * {
    display: none;
}
input[type="text"]:placeholder-shown + svg * {
    display: inline;
}

<span>
  <input type="text" placeholder="text">
  <svg data-v-027aed6c="" xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="position-absolute search-icon text-steel feather feather-search">
    <circle data-v-027aed6c="" cx="11" cy="11" r="8"></circle>
    <line data-v-027aed6c="" x1="21" y1="21" x2="16.65" y2="16.65"></line>
  </svg>
</span>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65344197

复制

相似问题

问css在单击时更改占位符(没有js)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css在单击时更改占位符(没有js)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css在单击时更改占位符(没有js)
EN