How can I perfectly add the text at the right of <input>

user_14462103 0
Viewed 65

I want to know I can I do like the below picture from google sign up form

enter image description here

I want to add "@myemail" in the right of input,and I know maybe I can use the structure like this:

<div>
   <input>
<div>
<div>
   <span>
<div>

and merge the two div in one line,but when I had done this,my border color can't match bwtween two div

especically I have shadow css in my code,there will be a line between two div,so I am really confused how to match two border color and shadow perfectly

frontend css html
4 Answers

Try using the one below. Just create a wrapper and style the wrapper with a border. Add an input with no border and outline also a span at the end.

If you want to add some border or some style when the user focus on the input you can make use of :focus-within pseudo-class. This will matches an element if the element or any of its descendants are focused. Reference

.input-container {
    width: 250px;
    display: flex;
    border: 2px solid #a9a9a9;
    justify-content: space-between;
}

.input-container input:focus,
.input-container input:active {
    outline: none;
}

.input-container input {
    border: none;
    width: 100%;
}

.input-container:focus-within {
  border: 2px solid rgb(114 76 252);
}
<div class="input-container">
    <input type="text" class="input-field" />
    <span>@gmail.com</span>
</div>

user_60993270
user_24420990

you can do it by floating the text of input to right

   input[type='text']{
   text-align:right;
    }

    input[type='text']:focus{
    text-align:left;
    }
user_165449740

Not sure what do you mean tho. But I don't think placing a line of text floating to the right like that has any practical purpose beside asthetic purpose. If you want example of email, use placeholder. For pre-filled value so users can type less: use value attribute. If you want user use exact email provider, says @gmail and not @yahoo, use form validation. 

<input type="email" value="@gmail.com">

user_124535620
Related