Colorize drop-down arrow of menu button

[sky-t]

Hi there,

is there a way to change the color of the drop-down arrow in menu button dynamicly?
I can change the color of the text in menu button but i also want to change the color of the arrow.


Thanks for your solution!

[jarry]

Define each style of the down arrows.

Code:

<style type="text/css">
	.mb1 .m-btn-downarrow{
		background-image: none;
	}
	.mb1 .m-btn-downarrow:after{
		content: '';
		display: block;
		position: absolute;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 4px;
		border-color: transparent;
		border-top-color: teal;
		top: 50%;
		left: 50%;
		margin-top: -2px;
		margin-left: -4px;
	}
	.mb2 .m-btn-downarrow{
		background-image: none;
	}
	.mb2 .m-btn-downarrow:after{
		content: '';
		display: block;
		position: absolute;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 4px;
		border-color: transparent;
		border-top-color: red;
		top: 50%;
		left: 50%;
		margin-top: -2px;
		margin-left: -4px;
	}
</style>

Add the menubutton css class to change the down arrow style.

Code:

$('#b1').addClass('mb1');
$('#b1').addClass('mb2');