<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="row"> <div id="relContainer0" class="relcontainer col-md-12"> <button type="button" onclick="relationshipDelete(0);return false;" class="redX pull-right relDelete"> <span class="glyphicon glyphicon-remove"></span> </button> <input type="hidden" id="relatedCharacterId0" name="related_to[0][related_character][id]" value="72"> <div class="checkbox clearfix"> <label> <input type="checkbox" id="NameToggle0" data-toggle="related_to[0][related_character][name]" class="existingCharacter" checked="True"> <small>Existing Character</small></label> </div> <div class="relationshipFirstRow" style="overflow:auto; padding-top: 10px;" > <select id="relationship0name" name="related_to[0][related_character][name]" class="arcPointSelect fieldTitle pull-left underlined" style="width:49%;" required=""> <option value="" selected hidden disabled>Character Name</option> <option value="2nd Character" data-objectid="72" >2nd Character</option> <option value="2nd Character" data-objectid="71">2nd Character</option> <option value="2nd Character" data-objectid="70">2nd Character</option> <option value="Test 3" data-objectid="69">Test 3</option> <option value="1st Character" data-objectid="68">1st Character</option> <option value="Test 3" data-objectid="67">Test 3</option> <option value="1st Character" data-objectid="66">1st Character</option> <option value="Test 3" data-objectid="65">Test 3</option> <option value="Rel Test" data-objectid="64">Rel Test</option> <option value="1st Character" data-objectid="63">1st Character</option> <option value="Test 3" data-objectid="62">Test 3</option> <option value="2nd Character" data-objectid="61">2nd Character</option> <option value="1st Character" data-objectid="60">1st Character</option> <option value="2nd Character" data-objectid="59">2nd Character</option> <option value="1st Character" data-objectid="58">1st Character</option> </select> <input type="text" class="pull-right underlined" name="related_to[0][relation]" placeholder="Relationship" style="width:49%;" required=""> </div> <div class="form-group"> <label for="relation0">Initial Description:</label> <textarea type="text" class="" name="related_to[0][initial_description]" rows="4" required="">2nd Character created to be 1st Character's friend.</textarea> </div> <div class="form-group"> <label for="relation0">End Description:</label> <textarea type="text" class="" name="related_to[0][end_description]" rows="4" required="">Still Friends</textarea></div> </div> </div> </div> <div class="col-md-5 pull-right"> <div id="fieldlist"> <div class="row"> <div id="fieldContainer0" class="fieldcontainer col-md-12" data-id="0"> <button type="button" onclick="FieldDelete(0);return false;" class="redX fieldDelete pull-right" tabindex="-1"> <span class="glyphicon glyphicon-remove"></span> </button> <input type="text" class="fieldTitle" name="fields[0][name]" placeholder="Title" required=""> <div id="fieldValues0"> <textarea class="" name="fields[0][values][0][text]" placeholder="Value..." required=""></textarea> </div> <input type="hidden" name="fields[0][values][0][order]" value="0"> <input type="hidden" name="fields[0][display_type]" value="IT"> <input type="hidden" class="fieldorder" name="fields[0][order]" value="0"> </div> </div> <div class="row"> <div id="fieldContainer1" class="fieldcontainer col-md-12" data-id="1"> <button type="button" onclick="FieldDelete(1);return false;" class="redX fieldDelete pull-right" tabindex="-1"> <span class="glyphicon glyphicon-remove"></span> </button> <input type="text" class="fieldTitle" name="fields[1][name]" placeholder="Title" required=""> <input type="hidden" class="fieldorder" name="fields[1][order]" value="1"> <input type="hidden" name="fields[1][values][0][order]" value="0"> <input type="hidden" name="fields[1][display_type]" value="OL"> <hr class="lowpadding"/> <ul class="fieldItemList"> <li class="fieldItem"> <div id="fieldValues1"> <input type="text" class="listInput" name="fields[1][values][0][text]" placeholder="Value 1..." required=""> </div> </li> <li> <div id="divList1Item1" class="fieldItem field1Value" data-value-id="1" style="display:inline"> <input id="1-listitem-1" type="text" class="listInput" name="fields[1][values][1][text]" placeholder="Value 2..." required=""> <input type="hidden" name="fields[1][values][1][order]" value="1"> <button type="button" onclick="DeleteListItem(1,1)" class="redX pull-right" tabindex="-1"> <span class="glyphicon glyphicon-minus"></span> </button> </div> </li> </ul> <button type="button" onclick="AddListItem('#fieldContainer1');return false;" class="addFieldItem" tabindex="-1"> <span class="glyphicon glyphicon-plus"></span> Add List Item </button> </div> </div> </div> </div> </div> </div>

.fieldcontainer, .relcontainer { border-style: solid; padding: 10px; } ul.fieldItemList { padding-left:20px; margin-bottom:0px; } div.fieldItem:hover { color:#d9534f; } div.fieldItem input:hover { color:#333; } input:not([type=checkbox]):not([type=radio]) { border-top: 0 solid; border-right: 0 solid; border-bottom: 1px solid; border-left: 0 solid; border-color: #999; padding-left: 5px; padding-right: 5px; width: 94%; } textarea { background-color: transparent; border-top: 0 solid; border-right: 0 solid; border-bottom: 0 solid; border-left: 2px solid; border-color: #999; padding-left: 6px; margin-left: 2px; width: 100%; resize: vertical; } button, submit { border:none; } textarea:focus, input:focus, select.arcPointSelect:focus { outline: none; border-color: #00d8e8; } hr.lowpadding { padding: 0px; margin: 2px; margin-bottom: 10px; border-color: #999; } hr.lowpadding::after { content: ""; clear: both; display: table; } .fieldTitle { font-size: 16px; font-weight: bold; } button.redX { color: grey; background-color:transparent; padding-right: 0; padding-top: 0; } button.redX:hover { color:#d9534f; } button.addFieldItem { background-color:transparent; padding-right: 0; padding-left: 1px; color: grey; } button.addFieldItem:hover { color: #5cb85c; } button.addFieldItem span.glyphicon { margin-right: 11px; } /*****************************/ .checkbox { margin:0px; width:inherit; } select.arcPointSelect { background-color: transparent; border: 0 solid; padding-left: 0px; padding-right: 5px; width: 100%; } .relationshipFirstRow input.underlined, .relationshipFirstRow select.underlined { border-bottom: 1px solid; border-color: #999; height:20px; padding-bottom: 3px; padding-top:0px; } .relationshipFirstRow input.underlined:focus, .relationshipFirstRow select.underlined:focus { border-color:#00d8e8; } .relationshipFirstRow { margin-bottom: 10px; } select.arcPointSelect option:enabled { color: #333; }

$(document).ready(function() { $('.arcPointSelect').each(function(index) { if ($(this).val() === null) { $(this).css('color','#999') } }); $('.arcPointSelect').change(function() { var current = $(this).val(); if (current != 'null') { $(this).css('color','black'); } else { $(this).css('color','gray'); } }); });