It seems your system generates a span with the tag that actually stays outside the input and not inside it, this makes it a little difficult to do only with CSS, an alternative is to generate this span after the input to make it easier to tag if you have any interaction on input above.
Now let’s go to the code. The only JS I used, pure, was so you could focus on an input that is inside a div by clicking on the div, except it no longer needs JS for anything. So click on div pai seal on the input filho that is inside ok.
In the image above, the span that will appear with the tag gets display:block, and will only appear if the input above have some value in. to make that validation I use :not(placeholder-shown), to know more read here Function - show password! I talk a little bit more about this.
There is a CSS property called :focus-within it serves to stylize an element if any child within it is focused. This is native to CSS and is with this pseudo-class that I put the color on div when foco in the input within it
And to "remove" the input I grant the technique assima with a :not(focus), gets like this input:not(:placeholder-shown):not(:focus). So if you don’t have placeholder pq logically has some value inside and is not focused, logically pq vc clicked out the input some.
To take out the input from the screen I used the same CSS that Bootstrap uses in the class sr-only, this CSS does not take away the input of the screen with display:none, because it hinders accessibility, sr-only just doesn’t let the input visible to "normal" users, but input still accessible to screen readers screen-Readers
Follow the code with the example. all with CSS (js só para focar o input quando clica na div, se vc precisar disso...)
var pai = document.querySelectorAll('.react-tagsinput');
var inp = document.querySelectorAll('.react-tagsinput-input');
function foca() {
inp.forEach( (tag) => {
tag.focus();
})
}
pai.forEach( (el) => {
el.addEventListener('click', foca);
})
* {
box-sizing: border-box;
}
.react-tagsinput {
padding: 20px;
border: 1px solid #000;
}
.react-tagsinput:focus-within {
background-color: tomato;
}
.react-tagsinput:focus-within .react-tagsinput-input {
height: 50px;
}
.react-tagsinput .react-tagsinput-input + span {
display: none;
}
.react-tagsinput .react-tagsinput-input:not(:placeholder-shown) + span {
display: block;
}
.react-tagsinput .react-tagsinput-input:not(:placeholder-shown):not(:focus){
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
<div class="react-tagsinput">
<input type="text" class="react-tagsinput-input" placeholder="com placeholder">
<span class="react-tagsinput-tag">tag</span>
</div>
There are some ways to do yes only with CSS, so I understood if you have some tag or nothing you want the line to have a height x, if you have a tag or nothing and focus the height is 2x, and Blur back to x having something inside or not, that’s it?
– hugocsl
It’s not really about height, it’s about whether she shows up or not. What I want is: delete . React-tagsinput-input IF there is any . React-tagsinput-tag when taking Focus. In the image with the red arrow, as it lost focus, the right one was to disappear the . React-tagsinput-input. When you click again, it should appear, as in the second image. If you don’t have any . React-tagsinput-tag, it should also appear, as it contains the placeholder, as in the first image. That is, if it does not exist. React-tagsinput-tag, whether with or without focus, . React-tagsinput-input must appear.
– Gleidson Henrique
I forgot to comment that the blank line actually just doesn’t have the placeholder because in React I changed it if there was already a tag inserted. Therefore, if this modification were not made, it would be as follows: http://prntscr.com/od1mz2. I remove it to be more beautiful. If you can already do this only in CSS too, it’s even better than the gambiarra I did in Javascript.. hehe Thanks already @hugocsl =]
– Gleidson Henrique