How to add static text inside an input form
Solution 1
HTML
<label for="subdomain">Subdomain:</label>
<input type="text" placeholder="ExampleDomain" id="subdomain" />
<input type="text" id="subdomaintwo" value=".domain.com" disabled/>
CSS
input[type="text"]#subdomaintwo{
-webkit-appearance: none!important;
color: red;
text-align: right;
width: 75px;
border: 1px solid gray;
border-left: 0px;
margin: 0 0 0 -7px;
background: white;
}
input[type="text"]#subdomain{
-webkit-appearance: none!important;
border: 1px solid gray;
border-right: 0px;
outline: none;
}
Solution 2
You can achieve this with the following approach:
- place the
<input>
in a<label>
withposition:relative
- give the
<label>
an::after
pseudo-element withposition:absolute
- set
box-sizing
of the<input>
toborder-box
- give the
<input>
apadding-right
equal to the width of the::after
pseudo-element
Working Example:
label, input {
position: relative;
display: block;
padding-right: 76px;
width: 174px;
box-sizing: border-box;
}
label::after {
content: '.' attr(data-domain);
position: absolute;
top: 4px;
left: 96px;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
display: block;
color: rgba(0, 0, 0, 0.6);
font-weight: bold;
}
<label data-domain="domain.com">
<input type="text" placeholder="exampledomain" />
<label>
Solution 3
The readonly
property should be used:
<label for="subdomain">Subdomain:</label>
<input type="text" placeholder="ExampleDomain" id="subdomain" />
<input type="text" id="subdomaintwo" value=".domain.com" readonly="readonly" />
Because disabled controls that do not receive focus and are ignored in tabbing navigation, are not posted. The readonly property only can't be changed by the user.
Solution 4
How about wrapping your input
inside a div
(let's call it div.wrapper for ease), and then you can add some text in the div.wrapper with ".domain.com" aligned to the right? Like this for example:
<div class="wrapper">
<input type="text" name="subdomain"/>
<p class="input-text">.domain.com</p>
</div>
You can style your div to make it look like your input and can make sure the actual input has no border, etc., so it's indistinguishable from div.wrapper.
It is a bit of a hack, but why not?
Solution 5
I'm not sure if this can be accomplished using just one input form.
Maybe what you are seeing there is not a single input form, but an input form next to a static text.
So my idea here is to put an input form (where the user can write) followed by a static text (.domain.com). Then you can put both them inside a container and style the container to look like a input form.
This will do the trick.
Davor Budimir
Fluent in two languages (English and Slovenian) and currently learning Spanish with plans to learn German afterwards. Worked as backend and frontend developer, best in class for twelve grades/years in a row with the max sum of grades (5.0), winner of the mobile hackathon, spent 3 years as a freelancer, currently working as Product Manager at Helpjuice, previously frontend developer and technical customer service manager. Passionate about nice UI and UX, ultimate perfectionist, enjoys collaborative teamwork and challenges.
Updated on October 04, 2021Comments
-
Davor Budimir over 2 years
How can I put this static text in an input form?
It's there all the time.
This is my code:
<label for="subdomain">Subdomain:</label> <input type="text" placeholder="ExampleDomain" id="subdomain"/>