Edit CSS via form - live preview

Issue

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")
        $('div.signUp').css("background","red")
          .css("color","black");
            
    else if ($(this).attr("alt") == "2")
        $('div.signUp').css("background","yellow")
          .css("color","black");
    else
        $('div.signUp').css("background","cyan")
          .css("color","white");
  });

div.divSpecific {
    height: 20px;
}
.signUp{
    border:solid 1px;
    height:20px;
    width:100px;
    text-align:center;
}

<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>

<br>
  
<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>

<br>

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

<br><br>

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

Solution

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.

$('[type="radio"]').click(function() {
    $("#border_color").val($(this).attr("data-border-color")),
    $("#border_width").val($(this).attr("data-border-width")),
    $("#bg_color").val($(this).attr("data-bg-color")),
    $("#text_color").val($(this).attr("data-color")),
    applyStyles();
})

$('[type="submit"]').click(function() {
    applyStyles();
})
  
function applyStyles() {
    $('div.signUp').css({
        borderColor: $("#border_color").val(),
        borderWidth: $("#border_width").val(),
        backgroundColor: $("#bg_color").val(),
        color: $("#text_color").val(),
    })
}

div.divSpecific {
    height: 20px;
}
.signUp{
    border:solid 1px;
    height:20px;
    width:100px;
    text-align:center;
}

<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" data-bg-color="red" data-border-color="black" data-color="black" data-border-width="2" alt="1" name="name" /></div>
<div class="divSpecific">Design - ver.2<input type="radio" data-bg-color="yellow" data-border-color="black" data-color="black" data-border-width="2"  alt="2" name="name" /></div>
<div class="divSpecific">Design - ver.3<input type="radio" data-bg-color="cyan" data-border-color="black" data-color="white" data-border-width="2"  alt="3" name="name" /></div><br/>
  
<div>Or change manually background, text abd border (HEX format)</div>
<div>Background color<input id="bg_color" type="text"><input type="submit" value="Confirm"></div><!-- you were missing a close div here -->
<div>Text color<input id="text_color" type="text"><input type="submit" value="Confirm"></div>
<div>Border color <input id="border_color" type="text"><input type="submit" value="Confirm"></div><br>

<div>And change border weight</div>
<div>Border weight (defoult 1 px)<input id="border_width" type="text"><input type="submit" value="Confirm"></div><!-- ...and here -->

<br><br>

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

Answered By - Jonathan