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"/>
-
1Can you elaborate on what you are trying to achieve?edhedges– edhedges2014-06-23 15:04:06 +00:00Commented Jun 23, 2014 at 15:04
-
1Use a dom inspector/debugger to see how it's done wherever you've seen this technique in use. You'll probably find it's an absolutely positioned divMarc B– Marc B2014-06-23 15:04:24 +00:00Commented Jun 23, 2014 at 15:04
-
I draw this is photoshop. Now I don't know how to do it :) So I need to put text inside my input. Not below, not above input.Davor Budimir– Davor Budimir2014-06-23 15:13:57 +00:00Commented Jun 23, 2014 at 15:13
-
1I just loved the way you have asked this question. The picture makes more sense than the words & it conveys better outcomes.Arun Ramachandran– Arun Ramachandran2019-03-29 15:33:51 +00:00Commented Mar 29, 2019 at 15:33
Add a comment
|
8 Answers
You can achieve this with the following approach:
- place the
<input>in a<label>withposition:relative - give the
<label>an::afterpseudo-element withposition:absolute - set
box-sizingof the<input>toborder-box - give the
<input>apadding-rightequal to the width of the::afterpseudo-element
Working Example:
label, input {
position: relative;
display: block;
padding-right: 76px;
width: 180px;
box-sizing: border-box;
}
label::after {
content: '.' attr(data-domain);
position: absolute;
top: 4px;
left: 102px;
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>
Comments
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;
}
Comments
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.
1 Comment
BenMorel
While this is valuable information, this should have been posted as a comment to avril's answer.
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?
Comments
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.
Comments
<div style="border: 1px solid gray; display: inline; padding: 2px">
<input type="text" style="outline: 0; border: 0;">
<span>.domain.com</span>
</div>
1 Comment
AnrDaemon
Brilliantly simplistic, even though it is NOT EXACTLY what was asked for. :) But it has the benefit of consistent behavior w.r.t. the text suffix of variable length.
In angular you can do this:
In the html file add placeholder attribute to input with text variable:
<input type="time" class="timepicker" placeholder="{{text_variable}}">
In the css:
.timepicker:before {
content:'.' attr(placeholder);
margin-right:5px;
color:#9d9d9d;
}
Comments
I´ve written an span and given it the bootstrap class .form-control, a grey background and filled in that span the static word.
<span class="form-control bg-grey">Exampledomain</span>
But I think, the Answer of nerkn solves it´s best.
2 Comments
0101
That is a span, not a working input
Wollhaar
sure, depends on, what you need. for a form would it be better to set it in an input, cause of values.. but if you just want put something quick and easy to display information to the user, span could be also enough... but in the end just a quick and dirty solution.