删除选择框中的空格

Question

我在表单中有一些输入字段。我给了他们所有5px的填充，但选择框似乎有一个额外的空间。它不是由填充，边距或文本缩进引起的。保留文本对齐。有没有办法摆脱这个？

以下是我的代码。底部是小提琴的链接。

CSS

import java.awt.*;
import javax.swing.*;

/**
 * JFrame with a progress bar and button. With the size of their own.
 *
 * @author Tadesse
 */
public class Test extends JFrame {

    JButton button = new JButton("Cancel");
    JProgressBar progressBar = new JProgressBar();

    public Test() {
        GridBagConstraints g = new GridBagConstraints();
        setLayout(new GridBagLayout());
        set(g, 0, 0, GridBagConstraints.CENTER);
        add(progressBar, g);
        set(g, 0, 1, GridBagConstraints.CENTER);
        add(button, g);
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setSize(200, 100);
        setVisible(true);
    }

    public void set(GridBagConstraints c, int x, int y, int anchor) {
        c.gridx = x;
        c.gridy = y;
        c.anchor = anchor;
    }

    public static void main(String[] args) {
        new Test();
    }
}

HTML

input[type=text],
select {
    padding:5px;
}
select {
    border:solid 1px #555;
    padding:5px;
}

https://jsfiddle.net/64ppa5f5/

PS：

我也放大了缩放，它是100％。

Answer 1

浏览器渲染本身有一些东西。有关更多信息，请参阅同一问题的答案：Text Padding in Select Boxes

总之，你不应该这样做或不常见。

Answer 2

您看到的填充来自浏览器特定的样式表。要删除选择框中的空格，请添加以下样式。

input[type=text],
 select {
   padding:5px;
 }

 select {
    -webkit-appearance: none;
    -moz-appearance : none;
    border:solid 1px #555;
    border-radius:3px;
    padding:5px;
 }

请参阅此link