Position 文本区域内的图标

Question

I am trying to position an icon that should clear the textarea content. I have a sample I worked on, wrapped the textarea with a parent that has display: inline-block but the problem is that I want the textarea/parent to be full width to begin with. If I set a 100% width on textarea, it does not achieve the desired result. Also, can't work with vw which seems to work apparently, for some reason people at work avoid it.

Here's what I have

https://codesandbox.io/s/magical-haze-ncslb?file=/src/styles.css

Answer 1

You need to either change .parent class to display:block or add the 2 lines width: 100%; box-sizing: border-box; width: 100%; box-sizing: border-box; in css as demonstrated below:

 .parent { border: 1px solid #ccc; padding: 5px 10px; display: inline-block; position: relative; width: 100%; //Add this line box-sizing: border-box; //Add this line }.parent span { position: absolute; right: 10px; top: 6px; background-color: #ddd; }.parent textarea { border: none; width: 100%; display: block; }