Edit CSS via form – live preview

How can I add the option to edit the background color (via input) and the weight of the border (via input). Please, look at my script.

I’m not an expert on JS, please give an example to JSFiddle.

$('.divSpecific input').click(function(){
    if($(this).attr("alt") == "1")
    else if ($(this).attr("alt") == "2")
div.divSpecific {
    height: 20px;
    border:solid 1px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>First step - choose button</div>
<div class="divSpecific">Design - ver.1<input type="radio" alt="1" name="name" /></div>
<div class="divSpecific">Design - ver.2<input type="radio" alt="2" name="name" /></div>
<div class="divSpecific">Design - ver.3<input type="radio" alt="3" name="name" /></div>

<div>Or change manually background, text abd border (HEX format)</div>
<div>Background color<input type="text"><input type="submit" value="Confirm">
<div>Text color<input type="text"><input type="submit" value="Confirm"></div>
<div>Border color <input type="text"><input type="submit" value="Confirm"></div>


<div>And change border weight</div>
<div>Border weight (default 1 px)<input type="text"><input type="submit" value="Confirm">


<div class="signUp">Sign Up</div>

Create a function that will handle applying the CSS styles and then add some data attributes to the radio inputs and use them to set default values in your text areas.

From the looks of it, instead of click, maybe you want to try the change event?

One option would be to add an onClick option to each of the buttons that calls a function for you:

<input type="text" id="backgroundInput"><button onClick="updateBackground()">Confirm</button>

function updateBackground() {
    $('div.signUp').css('background-color', $('#backgroundInput');

Just rinse and repeat with the other three inputs.

Another option is you could give each of the buttons an ID and do something similar to what you did for the radio buttons by adding a .click(function()…) handler for each button.