Question

＆＃13;

$(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();


  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

上面代码的要点是，当按钮“编辑”时。单击它，它将打开一个新的GUI（对于凌乱的代码，我很新），它将显示一个名为“添加新输入”的按钮。这应该会产生3个新元素（我已经删除了很多代码）：一个输入，按下后会获得焦点，并等待你激活任何输入，例如＆＃39; RMB＆＃39;或者＆＃39; R＆＃39;然后用该键替换文本，使用颜色选择器（稍后将讨论的主题）和删除输入对的按钮（包括其自身）。

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

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

（https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing）

但这似乎对我没有帮助。接下来我尝试了w3schools，但我找不到关于它的文章，但后来尝试了Try It Editor并在padding:0px个标签上做了<p>的事情，它确实把边框放在文本旁边。 <input>标签有什么不同之处，或者我错过了这张照片吗？

Answer 1

我认为这个 - ＆gt; Webkit CSS to control the box around the color in an input[type=color]?（方法1对我很好）。

并删除背景颜色是您可以做的最好的

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

1 个答案: