daisyUI extension CSS only No background patch

Floating Label Frame

延續原始 CSS_Bootstrap_Floating_Label 的分段框線設計，讓標籤移到欄位框線時，由前後框線自然讓出空間，不使用背景色遮住框線。

框線處理比較

依序比較 daisyUI 原生 Floating Label、floating-label-frame，以及搭配 field-soft 的柔和版本。請點入空白欄位觀察標籤與框線。

daisyUI 原生

標籤使用 base-100 背景遮住欄位框線。

Frame 擴充

標籤背景透明，內框與 focus 外框都會在標籤左右切開。

Frame + Field Soft

內框使用 35%，focus 外框使用 12% 柔和色彩。

Fieldset 內使用

Floating Label 是 Fieldset 裡的獨立欄位，不會覆寫 fieldset-legend 或 fieldset-label。本區同時搭配 field-soft 展示柔和框線與 focus outline。

聯絡資料

標示星號的欄位為必填；所有欄位都保留原生鍵盤、驗證與自動填入行為。

搭配右側按鈕

外層使用 daisyUI join 與 floating-label-frame-join，input 和按鈕各自加入 join-item。按鈕只對齊實際欄位高度，不會包含浮動標籤預留空間。

密碼顯示切換

按鈕保留自己的 focus 與切換狀態。

密碼目前為隱藏狀態。

電話欄位

使用 tel: 連結開啟裝置撥號功能。

撥打

地址欄位

使用連結語意，在新分頁開啟 Google Maps。

地圖 
<div class="floating-label-frame-join join w-full">
   <label class="floating-label floating-label-frame">
      <input class="input field-soft join-item w-full">
      <span class="floating-label-frame-box">...</span>
   </label>
   <button class="btn join-item">顯示</button>
</div>

語意色與欄位狀態

框線會讀取 daisyUI 語意色；disabled 標籤保持可見，不會因停用而消失。

尺寸變體

沿用 daisyUI 的 xs 到 xl 欄位高度與字級變數，不使用 Bootstrap 固定尺寸。