/    Sign up×
Community /Pin to ProfileBookmark

javascript with css style

Copy linkTweet thisAlerts:
Mar 30.2016

Please help.

I have javascript <input type=”number” ………….>, it comes with a default up/down arrow at right of input box
for increasing and decreasing number, as below:
^
v
I have to change color of up/down arrow to either green or yellow. What should I add in css file in order to change color of up/down arrow?
Thank you very much for your help.

-kee kee

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@Kevin2Mar 31.2016 — Very basically you can't change the color of those <input type="number"> arrowheads with CSS. If your requirement is to use custom arrowhead colors you will have to do it with <input type="text"> and either custom graphics or some cunningly placed arrow text characters next to it. Then you would need to script what happens when those graphics/characters are clicked on. Plus verifying that anything in the <input> is a number character...
Copy linkTweet thisAlerts:
@moongeegeeauthorMar 31.2016 — Very basically you can't change the color of those <input type="number"> arrowheads with CSS. If your requirement is to use custom arrowhead colors you will have to do it with <input type="text"> and either custom graphics or some cunningly placed arrow text characters next to it. Then you would need to script what happens when those graphics/characters are clicked on. Plus verifying that anything in the <input> is a number character...[/QUOTE]

Would please give me an example how to handle it? I have been trying a lots of things but failed. I use Firefox.

Thank you for your help.

Kee
Copy linkTweet thisAlerts:
@TcobbMar 31.2016 — Here's a rather rough and dirty way to accomplish this. It should get you started.

[CODE]<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
window.onload = function(){
var inp, up, down, val;
val = 0;
inp = document.getElementById('inp1');
up = document.getElementById('more');
down = document.getElementById('less');
up.onclick = function(){
var x = inp.value * 1;
++x;
inp.value = x;
}
down.onclick = function(){
var x = inp.value * 1;
--x;
inp.value = x;
}
}

</script>

</head>
<body>
This is an up arrow<span style = "color:red">&#8593;</span><br>
This is a down arrow<span style="color:blue">&#8595;</span>
<form>
<input id="inp1" type="text" value="0" readonly="true">
<span id="more"style = "color:red">&#8593;</span>
<span id="less" style="color:blue">&#8595;</span>
</form>
<p>Click on the arrows to the right of the input to increment or decrement the value.</p>
</body>
</html>
[/CODE]
Copy linkTweet thisAlerts:
@moongeegeeauthorApr 02.2016 — Here's a rather rough and dirty way to accomplish this. It should get you started.

[CODE]<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
window.onload = function(){
var inp, up, down, val;
val = 0;
inp = document.getElementById('inp1');
up = document.getElementById('more');
down = document.getElementById('less');
up.onclick = function(){
var x = inp.value * 1;
++x;
inp.value = x;
}
down.onclick = function(){
var x = inp.value * 1;
--x;
inp.value = x;
}
}

</script>

</head>
<body>
This is an up arrow<span style = "color:red">&#8593;</span><br>
This is a down arrow<span style="color:blue">&#8595;</span>
<form>
<input id="inp1" type="text" value="0" readonly="true">
<span id="more"style = "color:red">&#8593;</span>
<span id="less" style="color:blue">&#8595;</span>
</form>
<p>Click on the arrows to the right of the input to increment or decrement the value.</p>
</body>
</html>
[/CODE][/QUOTE]


Thank you very much for your help.
Copy linkTweet thisAlerts:
@TcobbApr 02.2016 — You are welcome. When I look at the code through my current browser it renders the up and down arrows as actual arrows rather then the as the HTML entities. Just in case this is happening to you as well, the actual code is:

(1) up arrow --- "&" plus "8593" plus ";"

(2) down arrow -- "&" plus "8595" plus ";"
×

Success!

Help @moongeegee spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...