Jump to content

CSS style based on value

pailwriter

By pailwriter
in CSS

 Share

Recommended Posts

pailwriter Newbie

pailwriter

Posted
Posted

 I am having trouble understanding some CSS effects. For example; how can I change the font color based on a text box value?

 

Here’s my scenario:

On the HTML page: 

<div id=”dv1” class=”firstDiv”>
<input type=”text” id=”tb1” class=”txtbx1” >
</div>

 

 

On the CSS page 

.txtbx1 {
Color: red;
}
.txtbx1:has(“Open”) {
Color: green;
}

 

I’ve tried “has” and “contains” but neither work.

I also tried doing the change on the whole div, but that didn't work either.

The value in the text box changes automatically (through some javascript) based on the time of day and not from a user input.

So, from 9am to 5pm, the value is “Open”, but from 5:01pm to 8:59am the text box value is “Closed”.

I can get it to change color on hover or by clicking a button, but I want it to change automatically with the changing of the text value, open or closed.

Is this possible?

Thanks.

Link to comment
Share on other sites
pailwriter Newbie

pailwriter

Posted
  • Author
Posted

I appreciate the response, but this answer only works if the "value" of "Open" is preset. (hard coded)

On 7/24/2020 at 2:34 PM, dsonesuk said:

  


.txtbx1[value="open"]{
	color: green;
	}

 

I need to style the text when it is populated by the javascript code. There will be no hard coded value and that value of "Open" or "Closed" will change twice a day when the javascript code runs. 

Here is a better sample of the code I am working with. 

<! DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Text Color change 2</title>
		
		<style>
			.txtbx {
				border: 2px solid #000;
				width: 140px;
				height: 60px;
			}
			.txtbx[value="Open"]{
				color: green;
			}
			.txtbx[value="Closed"]{
				color: red;
			}
		</style>
		<script>
			function myFunction() {
  		document.getElementById("txtbx1").innerHTML = "Open";
  		document.getElementById("txtbx2").innerHTML = "Closed";
			}
		</script>
	</head>
	<body>
		<div id="txtbx1" class="txtbx"></div>
		<div id="txtbx2" class="txtbx"></div>
		<button id="btn1" onclick="myFunction()">Click Me</button>
	</body>
</html>

 

In my particular situation, changing the color through the javascript function is not an option. It has to be done via CSS. (Somehow)

Thanks.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

Then it can't be done! CSS requires some sort of identifier to work to, id, classname, attribute value etc. It can't change anything like that. Sorry good luck!

If javascript changes value of attribute value of input, it will change it to different colour. It does not matter which way it was changed. and "open" is not treated  the same as "Open" the css i provided will only work for lowercase. Also value attribute is only supported on input elements, it can't do innerHTML added content.

Edited by dsonesuk
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

CSS preprocessors cannot do anything more than native CSS does, because they compile to native CSS. Only Javascript can do this.

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...