如何在HTML中的文本框內創建文本框/形狀

Question

我想創建一個輸入文本框，其中有一個形狀或其他內容。

Click here for my desired output. :)

感謝，

Answer 1

不能使用:after & :before因爲:before和:after呈現一個容器內，<input>不能包含其他元素。

你能做的最好的是 -

• 創建<span>標籤，這將是你的形狀
• 創建容器包裝兩種輸入&的<span>旁邊。

• 相應地將<span>定位在使用position: absolute;的輸入內。

  我創建了一個筆Shown here

HTML

<div class="container"> 
    <input type="text" /> 
    <span></span> 
</div> 

CSS

.container { display: inline; position: relative;} 
input { width: 400px; } 
span { 
    background: green; 
    position: absolute; 
    right: 5px; 
    top: 4px; 
    width: 20px; 
    height: 10px; 
}