颜色类型输入标记-使颜色类型输入元素的整个可见部分

Question

$(document).ready(function() {
$("#EditBtn").click(function() {
$("#HomePage").hide();
$("#EditPage").css("visibility", "visible")
});
$("#AddNewInputBtn").click(function() {
$("#EditPage").append("<div class = Key ><input class = InputKey type = text><input type = color class = InputColor></div>")
OrderKeyInputs();
});
});

<style> .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%;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h1 id="Title" class="Title">Reactor</h1>
<div id="HomePage" class="Page">
<button class="HomePageBtn" id="RunBtn">Run</button>
<button class="HomePageBtn" id="EditBtn">Edit</button>
</div>
<div id="EditPage" class="Page">
<button id="AddNewInputBtn">Add New Input</button>
</div>

上面代码的要点是，当单击"编辑"按钮时，它将打开一个新的GUI(很抱歉代码混乱，我很新)，它将显示一个名为"添加新输入"的按钮，该按钮应该包含3个新元素(我已经剪切了很多代码)：一个按下后将获得焦点的输入，并等待您激活任何输入，如"RMB"或"R"，然后用该键替换文本，一个颜色选择器(稍后将讨论的主题)和一个删除输入对的按钮(包括它自己)。

回到"颜色选择器"，我想使人员选择的颜色占据整个可见元素。我试过使用padding:0px，但似乎没有任何影响。我查看了box-sizing:上的MDN页面

框大小属性用于更改用于计算元素宽度和高度的默认CSS框模型。可以使用此属性来模拟不正确支持CSS框模型规范的浏览器的行为。

(https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)

但这似乎对我也没有帮助。接下来，我尝试了w3schools，但找不到关于它的文章，但后来尝试了Try it Editor，并在一些<p>标签上做了padding:0px的事情，它确实将边框放在了文本附近。<input>标签有什么不同吗？还是我错过了图片？

Answer 1

我认为这个->Webkit CSS可以控制输入中围绕颜色的框[type=color]？(方法1对我来说很好)。

去除背景色是你能做的最好的