制作一个<；部门>；或<；td>；与<；输入类型="；“颜色”/&燃气轮机；使用javascript/jquery_Javascript_Jquery_Html

制作一个<；部门>；或<；td>；与<；输入类型="；“颜色”/&燃气轮机；使用javascript/jquery

javascript jquery html

制作一个<；部门>；或<；td>；与<；输入类型="；“颜色”/&燃气轮机；使用javascript/jquery,javascript,jquery,html,Javascript,Jquery,Html,我在这里制作了一个input type=“color”示例： HTML JS 我希望在div/td中使用此功能的原因是，我希望删除按钮的所有边框，并能够在其上放置文本。现在按钮周围有一个奇怪的白色和灰色边框，没有文本是否可以使用javascript函数在div/td上模拟这种行为？input type=color是一种依赖于浏览器的功能我会使用更可靠的jQuery插件。简单的谷歌搜索给了我和许多其他人若您不喜欢输入的边框，只需更改该输入的css。您可以尝试使用标签来实现这一点。请参见JS

我在这里制作了一个input type=“color”示例：

HTML

我希望在div/td中使用此功能的原因是，我希望删除按钮的所有边框，并能够在其上放置文本。现在按钮周围有一个奇怪的白色和灰色边框，没有文本

是否可以使用javascript函数在div/td上模拟这种行为？

input type=color

是一种依赖于浏览器的功能

我会使用更可靠的jQuery插件。简单的谷歌搜索给了我和许多其他人

若您不喜欢输入的边框，只需更改该输入的

css

。

您可以尝试使用标签来实现这一点。请参见JSFIDLE中更新的示例：

改变颜色

或者您可以在另一个（可能隐藏的）

input type=“color”

无法解释的向下投票？您可以设置

背景色：透明

以清除较大的灰色区域。我还没有找到哪个CSS规则会留下灰色的轮廓。“我想要这个功能的原因是什么？”？哪一个？@Rayon我想要具有div/td功能的按钮，这意味着文本和无边框？是的，这可以做到。如果不推荐一个库（这是一个离题的库），它就很重要，对于堆栈溢出来说太宽了。我似乎无法让它工作，但这似乎是一个很好的解决方案。

<body id="bg">
  <table>
    <tr>
      <td class="one">
        <input type="color" id="inputcol" />
      </td>
      <td id="tdcol" class="two">
        Change colour
      </td>
    </tr>
    <tr>
      <td class="one">
        ipsum
      </td>
      <td class="two">
        lorem
      </td>
    </tr>
  </table>
</body>

input {
  border: 0;
  padding: 0;
  margin: 0;
}

table {
  border-collapse: collapse;
  background: red;
}

table tr td {
  border: 1px solid white;
  padding: 5px;
  text-align: center;
  color: white;
}

#inputcol:hover, #tdcol:hover {
  cursor: pointer;
}

$(document).ready(function(){
    $(".one").css("background-color", $("#inputcol").val());
});

$("#inputcol").on("change", function() {
  $(".one").css("background-color", $("#inputcol").val());
});

$("#tdcol").on("click", function() {
  /* color-function */
});

         <label for=color>Change color
               <input type=color id=color style="position: absolute; top: -100%">
         </label>

$("#tdcol").on("click", function() {
  /* color-function */
  $("#inputcol2").click();
});