Change a Text Input's Value with CSS

Change a text input's value with CSS?

That really isn't what CSS is for.

CSS is for styling your content; HTML is for the actual content itself.

If you need to modify the content after the HTML has loaded, then that's what Javascript is for.

So the real answer to your question is: either modify the HTML directly, or use Javascript.

There are some things you can do with CSS that affect the content, such as adding additional text in-front of or behind an element using the :before and :after pseudo-selectors, but that won't help you in this case, and shouldn't be used for the kind of content change work that you're talking about.

By the way, slightly off-topic, but if you're using input field value as a prompt text, you may want to consider looking into the HTML5 placeholder attribute instead. This also doesn't address your question, but it does sound like it might be something that could be useful to you.

Is it possible to change input value using CSS?

There's no need to use css for this. You can use placeholder attribute for your input tag, it will show a default value in input boxes:

<input type="text" name="username" placeholder="Username" />

Please consider that placeholder attribute is not supported in all browsers and if you want to make it cross-browser you can write a javascript code to put a default value in your input-boxes or use this simple and quick fix:

<input type="text" name="username" onFocus="if(this.value=='Username') this.value='';" onBlur="if(this.value=='') this.value='Username';" value="Username" />

CSS change style if input has value or not

You won't be able to catch this with the value attribute as it will only apply the value on page load.
Either you use the placeholder-shown as Temani Afif answered, or if you want to support edge as well, you can use a :valid selector on a required field

.wrapper {

position: relative;

}

input {

font-size: 14px;

height: 40px;

}

.placeholder {

position: absolute;

font-size: 16px;

pointer-events: none;

left: 1px;

top: 2px;

transition: 0.1s ease all;

}

input:focus~.placeholder {

top: -1px;

font-size: 11px;

}

input:valid~.placeholder {

top: -1px;

font-size: 11px;

}
<div class="wrapper">

<input type="text" required>

<span class="placeholder">E-Mail</span>

</div>

HTML & CSS - Change text value in input button

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function HandleBrowseClick()
{
var fileinput = document.getElementById("browse");
fileinput.click();
}
function Handlechange()
{
var fileinput = document.getElementById("browse");
var textinput = document.getElementById("filename");
textinput.value = fileinput.value;
}
</script>

<input type="file" id="browse" name="fileupload" style="display: none" onChange="Handlechange();"/>

<input type="button" value="Take a photo" id="fakeBrowse" onclick="HandleBrowseClick();"/>No file chosen
</body>
</html>

Try this technique and apply your css class in it.



Related Topics



Leave a reply



Submit