Use CSS to update Input field

Question

Is there a way to use CSS to update input fields without changing HTML code?

I have a form like this:

// HTML

<div id="LoginFormContainer">
        <div class="formInputLine">
            <div class="inputContainer">
                 <input name="txtUserID$Textbox1" type="text" maxlength="15" id="txtUserID_Textbox1" placeholder="Username" title="Username">
            </div>
        </div>
        <div class="formInputLine">
            <div class="inputContainer">
                 <input name="txtPassword$Textbox1" type="password" maxlength="15" id="txtPassword_Textbox1" placeholder="Password" title="Password">
            </div>
        </div>
        <div class="formInputLine">
            <input type="submit" name="btnLogin" value="Login" id="btnLogin"><input name="builderID" type="hidden" id="builderID" value="abc">
        </div>
    </div>

//CSS

#FormLoginPage #LoginFormContainer .formInputLine .inputContainer input {
    text-transform: uppercase!important;
}

#FormLoginPage #LoginFormContainer .formInputLine .inputContainer input {
    border: none;
    font-size: 12px;
    width: 100%;
    color: #333;
    outline: 0;
    -webkit-appearance: caret;
}

// TRYING CSS - able to use this code to add a label but it applies to all input. Not sure how to target only the individual class with a specific id within it.

.formInputLine::before {
content: "Username";
}

And would like to change it to the following using only CSS:

Please note that the above code is actually part of this code I got from a 3rd party. So I am not sure if I can control it via the iframe tag.

Thanks for the help, I greatly appreciate it.

You need to show html - are they placeholder text? Absolute positioned text? We can't know - if they're placeholders, this is a good staring block http://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css — StudioTime, Mar 17 '17 at 18:24
Yes it can be done with only CSS, but is it recommended, no. — Waxi, Mar 17 '17 at 18:35
Then please provide an answer to the OP @Waxi and provide a list of the cons. I'm curious to see how you will approach this if the markup is as follows: ``. — hungerstar, Mar 17 '17 at 18:38
@hungerstar You're right, couldn't get it to work. Only Chrome renders it properly, but still has the problem of the placeholder going away on input.. https://jsfiddle.net/0qL0u9w2/1/ — Waxi, Mar 17 '17 at 19:20
@Waxi exactly, that's why OP needs to provide markup. Then we can see if there are wrapper elements that we can hook into. — hungerstar, Mar 17 '17 at 19:27

Dylan Mccoy · Answer 1 · 2017-03-17T21:25:46.360

If the input fields have wrapper elements you can use pseudo elements (before or after) on that wrapper to create what you want with pure css, otherwise you'll have to use javascript to manipulate the html structure / add elements etc.

So, for an example, if we have the following HTML structure:

<div class="input-wrapper">
    <input type="text" placeholder="some text">
</div>

We can do the following in CSS:

.input-wrapper {
    position: relative;
}

.input-wrapper:before {
    position: absolute;
    left: 0;
    bottom: calc( 100% + 10px );
    content: "some text";
}

::-webkit-input-placeholder { 
  color: transparent !important;
}

(This one is used if we have a placeholder and we want to hide it. On production should also use the -moz- and -ms- prefixes).

For the sake of completeness, could you inline an example here? — AP., Mar 17 '17 at 21:17

score 0 · Answer 2 · answered Mar 17 '17 at 18:43

You could have something like this:

I've included my own font, due to lack of context.

body {font-family: "Droid Sans"}

.Input-Element {padding: .3em;margin: .5em 0}
.Input-Element label {display: block;text-transform: uppercase;padding: .2em 0;font-size: .8em}
.Input-Element input {border:1px solid rgba(0, 0, 0, 0.34);padding:.5em;outline:none;transition: border .25s}
.Input-Element input:focus {border-color: rgba(0, 0, 0, 0.73)}

<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">

<div class='Input-Element'>
  <label>Username</label>
  <input name='user'>
</div>

<div class='Input-Element'>
  <label>Password</label>
  <input name='psw'>
</div>

Note: Click Run Code Snippet to see the form!

Thanks for the answer. Sorry I didn't include much information above earlier. As I was trying to understand whether it is possible and I think the answer is yes according to stackoverflow. — Alocus, Mar 17 '17 at 20:06
Absolutely! Anything you see is possible, as long as you put the time into making it ;) If this addresses your question adequately, please make sure to upvote and mark as accepted, so other people can benefit from the answer as well! — AP., Mar 17 '17 at 21:04

score 0 · Answer 3 · edited Mar 20 '17 at 15:22

You can use some jquery and css

$("input").wrap("<div class='custom-input'></div>");
$('.custom-input').eq(0).before("<label>USER NAME</label>");
$('.custom-input').eq(1).before("<label>PASSWORD</label>");

::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
  color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" valu "USER NAME" placeholder="USER NAME"><br>
<input type="passsword" placeholder="PASSWORD">

Alocus · Accepted Answer · 2017-03-19T03:05:38.427

I was playing with the ideas provided by a few solutions here. After some researching on my own with :nth-child, here is the solution I have for my question. I am sure there is an other way to do the CSS selection. But this is what I have for now.

Using the CSS below can target the two fields individually and add the specific labels

 /* add labels */
.formInputLine:nth-child(1)::before {
content: "Username";
}
.formInputLine:nth-child(2)::before {
content: "Password";
}

/* remove place holder */
::-webkit-input-placeholder {
color: transparent; 
}

:-moz-placeholder {
 /* Firefox 18- */
 color: transparent;
}

::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
}

:-ms-input-placeholder {
color: transparent;
}

Use CSS to update Input field

4 Answers4