如何根据子输入占位符状态更改容器边框（顺风）

问题描述 投票：0回答：1

我正在尝试设置当占位符不再显示时包含输入元素的父容器的边框颜色 - 我得到的最接近的工作解决方案是使用 focus-within 但这并不理想，因为我想要即使焦点丢失后，边框仍保持彩色 - 取决于是否插入文本。 我正在尝试实现类似于我对标签所做的事情（您可以在下面的代码中看到），但我希望它不使用peer来查看孩子。

目前我最接近的东西（不起作用）是 has-[:not(:placeholder-shown)]:border-blue-500 因为你可以看到蓝色边框立即处于活动状态，但它应该仅在以下情况下激活文本已插入（占位符未显示）

我正在尝试在没有任何js的情况下实现这一点

<html>

<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="m-4">
  <!--Name input-->
  <div 
  class="group relative border-gray-900 border flex 
         px-[16px] py-[8px] h-[54px] 
         items-center 
         has-[:not(:placeholder-shown)]:border-blue-500">
         
    <input 
     id="name" 
     type="text" 
     placeholder="Name" 
     class="peer placeholder:text-gray-500 placeholder:text-base block outline-none" />
     
      <label 
       for="name" 
       class="absolute left-[16px] -top-2.5 bg-white px-1 text-sm text-gray-600 
              transition-all duration-300 peer-placeholder-shown:opacity-0 
              peer-placeholder-shown:top-[16px] 
              peer-[:not(:placeholder-shown)]:opacity-100 
              peer-[:not(:placeholder-shown)]:-top-2.5">
                            Name
          </label>
      
  </div>

</body>

</html>

非常感谢任何帮助:)

html css tailwind-css
1个回答
0
投票

:not(:placeholder-shown)
与 
label
匹配，这就是它从蓝色开始的原因。考虑限定此选择器仅“查询”
input
，例如：

  • 添加 
    [placeholder]
    属性选择器。
  • 添加 
    input
    元素选择器。

<html>
  <head>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body class="m-4">
    <!--Name input-->
    <div
      class="group relative border-gray-900 border flex px-[16px] py-[8px] h-[54px] items-center has-[[placeholder]:not(:placeholder-shown)]:border-blue-500"
    >
      <input
        id="name"
        type="text"
        placeholder="Name"
        class="peer placeholder:text-gray-500 placeholder:text-base block outline-none"
      />

      <label
        for="name"
        class="absolute left-[16px] -top-2.5 bg-white px-1 text-sm text-gray-600 transition-all duration-300 peer-placeholder-shown:opacity-0 peer-placeholder-shown:top-[16px] peer-[:not(:placeholder-shown)]:opacity-100 peer-[:not(:placeholder-shown)]:-top-2.5"
      >
        Name
      </label>
    </div>
    
    <!--Name input-->
    <div
      class="group relative border-gray-900 border flex px-[16px] py-[8px] h-[54px] items-center has-[input:not(:placeholder-shown)]:border-blue-500"
    >
      <input
        id="name"
        type="text"
        placeholder="Name"
        class="peer placeholder:text-gray-500 placeholder:text-base block outline-none"
      />

      <label
        for="name"
        class="absolute left-[16px] -top-2.5 bg-white px-1 text-sm text-gray-600 transition-all duration-300 peer-placeholder-shown:opacity-0 peer-placeholder-shown:top-[16px] peer-[:not(:placeholder-shown)]:opacity-100 peer-[:not(:placeholder-shown)]:-top-2.5"
      >
        Name
      </label>
    </div>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.