輸入內部的靜態標籤

-2

有很多類似的問題，但我無法調整到我的情況。輸入內部的靜態標籤

這裏是我的目標：

無國界的輸入列表
靜態的（未消失）的標籤，垂直居中，右側
輸入
值對焦點（邊框，陰影等）施加一些效果
純CSS（我大概可以用javascript實現所有這些，但感覺很髒）

我已經達到了將輸入放在跨度旁邊的可接受效果，但我無法以這種方式在整行上應用任何焦點效果。

這裏是沒有焦點的效果的例子：

@Edit：

這裏是我提出的輸出代碼，但如前所述，它不能處理正確聚焦。 http://jsfiddle.net/f2znvn4f/

這是我的代碼relative/absolute的解決方案。問題在於，當關注時，標籤不會受到影響（看起來像廢話）。 http://jsfiddle.net/kv2uyjbt/1/

來源

2016-08-31 Krever

顯示你的一些標記 –

不能集中正常的股利。不可調焦。您請求的大多數任務都非常簡單，您可以使用單行CSS完美實現。如果你不想看到這個問題關閉爲offtopic，那麼你不會分享你想要的這麼長時間，這是一條關於stackoverflow的規則。分享您的CSS和HTML，我們將對其進行編輯以解決您的問題。解釋更好的結果。 –

做一個DIV – SandroMarques

Flexbox，就可以做到這一點：

div { 
 
    width: 80%; 
 
    margin: 1em auto; 
 
    border-bottom: 1px solid grey; 
 
    padding-bottom: .25em; 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    justify-content: space-between; 
 
    align-items:center; 
 
} 
 
input { 
 
    border: none; 
 
    text-align:right; 
 
} 
 
label { 
 
    flex: 1; 
 
} 
 
input:focus, 
 
input:focus + label { 
 
    background: pink; 
 
    outline: none; 
 
}

<div> 
 
    <input type="text" /> 
 
    <label for="">Long Label Goes Here</label> 
 
</div> 
 
<div> 
 
    <input type="text" /> 
 
    <label for="">Short Label</label> 
 
</div>

來源

2016-08-31 10:05:46

使輸入無邊框，並對其中的文本進行右對齊。然後將標籤絕對定位在（0，0）處，並用position: relative將其包裝在一個div中。那麼您只需要調整<label>和<input>的填充以使文字在垂直位置相匹配。

如果您遇到困難，請發佈您的當前代碼，我們應該能夠解決該問題。

來源

2016-08-31 08:14:21 howard9714

我已添加代碼:) – Krever

輸入內部的靜態標籤

回答

相關問題