JSFiddle - React, Tailwind, and code Playground

by johnc_22

HTML

<div class="apply">
    <input type="text" id="colValue" value="#00AEEF" /><br />
    <h2 class="backsearch"><a href="#">Back To Search Results</a></h2>
    <a class="linkbutton" title="Apply for this job." href="#" target=_blank>Apply Now</a>
    <a class="linkbutton" title="Add to job basket" href="#" target=Basket>Add to Basket</a> 
</div>

CSS

div {font-family: Tahoma; font-size: 11px}

.apply {width:200px; float:left}
.apply .linkbutton {display: block; margin:10px; width:130px; float:right; text-align:center; font-size:12px; padding:3px; }


/*Button Background Color*/
.apply .linkbutton {background:#00aeef; border:outset #7fd6f7 2px; }
/*Button Text Color*/
.apply .linkbutton {color:#fff ! important}

JavaScript

function updateOutsetColor(hexColor)
{
    var i = 0;
    var s = "";
    for(i = 0; i < document.stylesheets.length; i++)
    {
        var j = 0;
        for(j = 0; j < document.stylesheets[i].length; j++)
        {
            s = s + document.stylesheets[i][j];
            alert(s);
        }
        s = "";
    }
        
}

$(document).ready(function() {
    $('#colValue').change(function() {
        updateOutsetColor($(this).val());
    }); 
});