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
3 Columns, Middle One with Flexible Width
Are There Any CSS Standards That I Should Follow While Writing My First Stylesheet
How to Set a CSS Border on One Side Only
Chrome Get "User Agent Stylesheet"
What Is Difference Between CSS Em and Ch Units
How to Remove an Element from the Flow
How to Reset CSS3 *-Transform: Translate(…)
How to Put a Div in Center of Browser Using CSS
Ie & Firefox - Custom Drop Down Could Not Remove Native Arrows
How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width
How to Vertically Align a Progress Bar in Twitter Bootstrap
CSS Attribute Selector for Non-Empty Attributes
Multiple And/Or Nested Bootstrap Containers
How to Select First 2 <Li> Elements Using CSS
CSS Vertical-Align: Text-Bottom;