CODEWITHSUNDEEP
csstextstatic
dk9
dk9

Reputation: 1

CSS: How to make an input text border to cover the text around it?

I would like to blend a static value next to a simple text input form. so it will look like, for example: [static]What do you think about[/static] [user info]...[/userinfo]. i've came up with this:

        <p style="display:inline;">What Is It Like To Be</p>

        <div>
            <input name="post_title" type="text" id="topic"  class="input" size="50" maxlength="100" tabindex="1" placeholder="<?php echo $_GET["pr"];?>" style="padding-left:45px; " style="display:inline;"/>
        </div>

So, I do get the static 'prefix' inlined with the input form, but i want to make the static text look 'like' it is part of the form. Like a static 'placeholder' tag.

Thanks guys :)

Upvotes: 0

Views: 1423

Answers (1)

rlemon
rlemon

Reputation: 17667

You could try something like this:

HTML 

<label class="input-stretch">prefix_<input type="text" /></label>​

CSS 

.input-stretch {
 border: 1px solid #222;
 padding: 0.1em;    
}
.input-stretch input {
 border: none;
 outline: none !important;    
}
​

Basically remove the input border and outline, then add one to the label or whatever other element you want to wrap it in.

outline: none !important; may also need to be applied on active/focus states, iirc chrome gives it some nice blue outline??

DEMO

Upvotes: 1

Related Questions