pailwriter
-
Content Count
4 -
Joined
-
Last visited
-
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.
-
I appreciate the response, but this answer only works if the "value" of "Open" is preset. (hard coded) 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.
-
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?
-
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.