HTML에서 텍스트 상자 안에 텍스트 상자/도형을 만드는 방법

Question

내부에 입력 된 텍스트 상자를 만들고 싶습니다. 그 안에는 도형 등이 있습니다. 당신은 :after & :before 때문에 :before 및 :after는 컨테이너 내부 렌더링 사용할 수 없으며 <input> 다른 요소를 포함 할 수 없습니다

Click here for my desired output. :)

감사합니다,

Answer 1

.

당신이 할 수있는 최선입니다 -

• 컨테이너 포장 모두 입력 & 옆에있는 <span>를 만들려면 모양
• 있을 것 <span> 태그를 만들 수 있습니다.

• 을 사용하여 입력 내에 따라서 <span>을 배치하십시오.

  나는 펜 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; 
} 

을 만든