Jump to content
pailwriter

CSS style based on value

Recommended Posts

 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.

Share this post


Link to post
Share on other sites

Thanks for the reply. 

What happened to the idea of adding the "contains" option in CSS? 

I read about this and it seems it was dumped before it really had a good start. 

Is there anything that replaced it? 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Okay, thanks for the help. I may have to use a CSS pre-processor like Sass. 

Although, it would be nice if CSS could do this on its own. Maybe someday. 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...