我正在使用 tailwind 和 Vue 制作一些可重用的切換組件。組件的邊框是灰色的，但計劃是當我單擊組件時，邊框會像下圖一樣呈紅色（我正在使用/嘗試使用焦點）。
問題是因為我可以只在輸入和按鈕上使用焦點，但我需要關注 div 標簽
我有一個 div，里面是兩個段落和一個輸入（型別：復選框）。我嘗試使用 tabindex，但它不起作用，當我單擊復選框或輸入欄位（灰色按鈕）時，它沒有焦點。僅當我在組件內部單擊而不是在復選框欄位中單擊時才聚焦。
代碼是
<template>
<div>
<div tabindex="1"
class="relative border border-gray-300 px-10 max-w-md mx-auto my-2 cursor-pointer rounded-lg px-5 py-4 rounded-lg border bg-white transition duration-150
ease-in-out placeholder:text-zinc-400 hover:bg-zinc-100 focus:border-transparent
focus:outline-none focus:ring disabled:opacity-50 motion-reduce:transition-none
dark:bg-zinc-900 dark:placeholder:text-zinc-500 dark:hover:bg-zinc-800" :class="[ error
? 'border-red-500 caret-red-500 focus:ring-red-500/50'
: 'border-zinc-300 caret-primary focus:ring-primary/50 dark:border-zinc-600 dark:focus:border-transparent',
]"
>
<div class="flex justify-between">
<div>
<h1 class="text-md font-semibold text-black">
{{ titleToggle }}
</h1>
<p class="inline text-md text-gray-500">
{{ subtitleToggle }}
</p>
</div>
<label class="switch my-auto">
<input
:value="toggleSwitch"
v-bind="$attrs" type="checkbox"
class="rounded-lg " :class="[
error
? 'border-red-500 caret-red-500 focus:ring-red-500/50'
: 'border-zinc-300 caret-primary focus:ring-primary/50
dark:border-zinc-600 dark:focus:border-transparent',]" @click="updateInput"
>
<span :class="[toggleSwitch ? 'bg-red-500 border-red-500' : 'bg-gray-300 border-gray-300',
]" class="slider round absolute cursor-pointer inset-0 border rounded-full"
/>
</label>
</div>
</div>
</div>
</template>
有沒有人有建議，或者可能有不同的方法？
uj5u.com熱心網友回復：
我不太明白你的問題，但你可以從順風檔案中看到這個：
focus-within (:focus-within)：當元素或其后代之一具有焦點時，使用 focus-within 修飾符設定元素的樣式：
<div hljs-string">">
<input type="text" />
</div>
https://tailwindcss.com/docs/hover-focus-and-other-states#focus
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496895.html