如何使颜色输入在浏览器之间显示一致的最小宽度？

问题描述

采用以下HTML和CSS：

input[type="color"] {
  border: none;
  width: 24px;
  height: 24px;
}

<?php
...
while($row = $result->fetch_assoc()){
echo "<form action= 'search.php' method='post'>";
                echo "<form action='' method='get'>";
                echo "<tr>
                        <td><input type='checkbox' name='checkbox_id[]' value='" . $row['test_id'] . "'></td>
                        <td> ".$row['test_id']." </td>
                        

                        <td><input type='text' name='name' value='<?NOT SURE WHAT TO INCLUDE HERE ?>'/></td>
                        <td><input type='submit' value='Save' id='" . $row['test_id'] . "' class='name' /></td>
                        
                        <td> ".$row['path']." </td>
                        <td> ".$row['video1_path']." </td>
                        <td> ".$row['video2_path']." </td>
                        <td> ".$row['video3_path']." </td>
                        <td> ".$row['video4_path']." </td>";

                if(empty($row["directory"])){
                          echo "<td></td>";
                        }else {
                          echo "<td><div><button class='href' id='" . $row['test_id'] . "'  >View Report</button><div></td>";
                            }
                echo " <td style='display: none;'> ".$row['directory']." </td>
                       </tr>";
              }

           ?>

         </table> <br>
            <input id= 'select_btn' type='submit' name='submit' value='Submit' class='w3-button w3-blue'/>
        </form>
      </form>
       </div>


<!-- Opens the pdf file from the pdf_report column that is hidden -->
<script type="text/javascript">
$(document).on('click','.href',function(){
  var result = $(this).attr('id');
  if(result) {
    var dir = $(this).closest('tr').find("td:nth-child(9)").text();
    window.open(dir);
    return false;
  }
});

</script>

<!-- Updates text input to database -->
<script type="text/javascript">
$(document).on('click','.name',function(){
  var fcookie1= 'mycookie1';
  var fcookie2= 'mycookie2';
  var name = $(this).attr('id');
  if(name) {
    var text1 = $(this).closest('tr').find("td:nth-child(2)").text();
    var text2 = $(this).closest('tr').find("td:nth-child(3)").text();
    document.cookie='fcookie1='+text1;
    document.cookie='fcookie='+text2;

    $.ajax({
      url: "name_edit.php",type:"GET",success: function() {
        // alert("Edited Database");
      }
    });
  }
});
</script>

在Chrome，Safari和Internet Explorer上，这似乎遵循CSS，并且输入显示为正方形。

Chrome screenshot

Safari screenshot

但是，在Firefox上，它显示为非常窄的矩形，不遵循CSS。这在设备之间和Firefox版本之间是一致的。如何使颜色输入与其他浏览器中的颜色匹配？

Firefox screenshot

所需：

FF结果：

解决方法

让我们摆脱边界，边距和边距：

input[type="color"] {
  border: none;
  width: 24px;
  height: 24px;
  border:0;
  margin:0;
  padding:0;
}

提琴：https://jsfiddle.net/qkyhn7pj/