Example

Font size: px
Color:
And look in the box below, when you input a color and/or font size, it'll change the color and/or font size of the text below...
Want the code? Click here!
Here's that code you wanted!
This is the code for the example above. Click on "Select All" and then copy the code.
 
  <style type="text/css">
   input {
    background-color:#F0F0F0;
    color:black;
    padding:5px;
    border:2px solid #CFCFCF;
    border-radius:4px;
    -wekit-border-radius:4px;
    -moz-border-radius:4px;
    -o-border-radius:4px;
   
  }
 input:focus {
    background-color:#F0F0F0;
    color:black;
    padding:5px;
    border:2px solid #4D4D4D;
    border-radius:4px;
    -wekit-border-radius:4px;
    -moz-border-radius:4px;
    -o-border-radius:4px;
    outline:0;
    -webkit-outline:0;
    -moz-outline-style:none;
  }
    button:hover #button-text {
    text-decoration:underline;
  }
  label {
    font-weight:normal;
    cursor:pointer;
    color:black;
    font-family:arial, sans-serif;
    float:left; 
    margin-top:7px;
    margin-right:10px;
    font-size:14px;
  }
  #editable-content { 
    border:1px solid black;
    padding:10px;
    font-family:arial,sans-serif;
    display:none;
    margin-bottom:10px;
  }
  </style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var fontSize = $('#textInput').val()+"px";
var colorContent = $('#textInput2').val();
$('#editable-content').fadeIn(1200);
$('#editable-content').html(' <span style="font-size:14px;">The size/color of this text will change when you enter a font size and color.</span>');
$('#textInput').keyup(function() {
fontSize = $('#textInput').val()+"px";
$('#editable-content').html(' <span style="font-size:'+fontSize+';">The size/color of this text will change when you enter a font size and color.</span>');
if($('#textInput').val() == '') {
$('#editable-content').html(' <span style="font-size:14px;">The size/color of this text will change when you enter a font size and color.</span>');
}
});

$('#editable-content').html(' <span style="font-size:'+fontSize+';color:black;">The size/color of this text will change when you enter a font size and color.</span> ');
$('#textInput2').keyup(function() {
colorContent = $('#textInput2').val();
$('#editable-content').html(' <span style="font-size:'+fontSize+';color:'+colorContent+';">The size/color of this text will change when you enter a font size and color.</span> ');
if($('#textInput2').val() == '') {
$('#editable-content').html(' <span style="font-size:'+fontSize+';color:black;">The size/color of this text will change when you enter a font size and color.</span> ');
}
});
});
  </script>

<div style="font-family:arial,sans-serif;">  
  <div style="width:400px;position:relative;">
    <div style="width:300px">
      <div style="font-family:arial,sans-serif;"><strong><label for="textInput">Font size:</label></strong>
        <span style="float:right;">
        <input type="text" id="textInput" />
        <span style="position:absolute;top:6px;right:80px;"><strong>px</strong></span></span></div>
    <br />
    <br />
    <br />
    <div style="font-family:arial,sans-serif;"><strong><label for="textInput2">Color:</label></strong>
      <span style="float:right;">
      <input type="text" id="textInput2" />
      </span></div>
  </div>
</div>
  <br />
  <br />
  <br />
  <br />
  <br />
  <strong style="font-size:13px;">And look in the box below, when you input a color and/or font size, 
  it'll change the color and/or font size of the text below...</strong>
  <br />
  <br />
  <br />
  
  <div id="editable-content"></div>
  
</div>