title: Color Type Input Tag - Making a Color Type Input the Entire Visible Part of the Element
body: <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    $("#EditBtn").click(function() {
      $("#HomePage").hide();
      $("#EditPage").css("visibility", "visible")
  
    });
    $("#AddNewInputBtn").click(function() {
      $("#EditPage").append("&lt;div class = Key &gt;&lt;input class = InputKey type = text&gt;&lt;input type = color class = InputColor&gt;&lt;/div&gt;")
  
      OrderKeyInputs();
  
  
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt; .InputColor {
    /* This is what we care about!!!!*/
    margin-right: 1%;
    padding: 0px;
    height: 18px;
    width: 50%;
  }
  body {
    background-color: #1496BB;
  }
  div.Page {
    visibility: hidden;
  }
  div * {
    background-color: #C02F1D;
    color: white;
    border: 0.7vh solid #AD2A1A;
  }
  div *:hover {
    background-color: #CD594A;
  }
  .Key {
    background-color: #1496BB;
    border: none;
  }
  .Key:hover {
    background-color: initial;
  }
  .InputKey {
    width: 10%;
    text-align: center;
    margin-right: 1%;
  }
  #Title {
    color: #1496BB;
    text-align: center;
    font-size: 12vh;
    font-family: "Helvetica Neue", sans-serif;
    text-decoration: underline;
    text-shadow: 2px 2px 2px;
    color: white;
  }
  .HomePageBtn {
    margin-top: 10%;
    margin-left: 14%;
    width: 30%;
  }
  #HomePage {
    visibility: visible;
  }
  #AddNewInputBtn {
    width: 70%;
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 2%;
  }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;h1 id="Title" class="Title"&gt;Reactor&lt;/h1&gt;
  
  &lt;div id="HomePage" class="Page"&gt;
  
    &lt;button class="HomePageBtn" id="RunBtn"&gt;Run&lt;/button&gt;
    &lt;button class="HomePageBtn" id="EditBtn"&gt;Edit&lt;/button&gt;
  
  &lt;/div&gt;
  &lt;div id="EditPage" class="Page"&gt;
    &lt;button id="AddNewInputBtn"&gt;Add New Input&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
    </p>
  
  <p>The point of the code above is to, when the button 'Edit' is clicked, it will open a new GUI(and sorry for the messy code, I am pretty new)and it will present a button called 'Add New Input' that is supposed to make 3 new elements (I have cut lots of the code): An Input that when pressed will gain focus and and wait for you to activate any input such as 'RMB' or 'R' then replace the text with that key, a color picker (The Subject Which Will be talked about later) and a button to delete the pair of inputs (Including itself).</p>
  
  <p>Back to the Color Picker, I want to make the color that the person has selected to take up the entire visible element. I have tried using <code>padding:0px</code> but It doesn't seem to have any affect. I looked at the MDN page on <code>box-sizing</code>: </p>
  
  <blockquote>
    <p>The box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification. </p>
  </blockquote>
  
  <p>(<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing</a>)</p>
  
  <p>But that didn't seem to help me either. Next I tried w3schools but I couldn't find an article about it but then tried the Try It Editor and did the <code>padding:0px</code> thing on some <code>&lt;p&gt;</code> tags and it did put the border adjacent to the text. Is there something different about <code>&lt;input&gt;</code> tags or am I missing the picture?</p>