下拉箭头的大小比平常小

Question

Jquery-UI 组合框的下拉箭头看起来不像他们承诺的那样。

我已经从他们的网站下载了所有 Jquery-UI 代码并包含在我的网站目录中。

<head>
    <title>TAT Dashboard</title>
    <link href="dist/css/customStyle.css" rel="stylesheet">
    <link href="dist/css/tabulator.min.css" rel="stylesheet">
    <link href="dist/css/funnelStyles.css" rel="stylesheet">
    <link href="dist/css/uploaderStyles.css" rel="stylesheet">
    <link href="dist/css/dropdownStyles.css" rel="stylesheet">
    <script type="text/javascript" src="dist/js/tabulator.min.js"></script>

    <link href="dist/jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet">
    <link href="dist/jquery-ui-1.12.1/jquery-ui.structure.css" rel="stylesheet">
    <link href="dist/jquery-ui-1.12.1/jquery-ui.theme.css" rel="stylesheet">

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Jquery -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>


    <!-- Jquery UI JavaScript -->
    <script type="text/javascript" src="dist/jquery-ui-1.12.1/jquery-ui.js"></script>



    <!-- Resources for charts-->
    <script type="text/javascript" src="dist/js/d3.js"></script>
    <script type="text/javascript" src="dist/js/d3-funnel.js"></script>
    <script type="text/javascript" src="dist/js/funnelScript2.js"></script>
    <script type="text/javascript" src="dist/js/dropdown.js"></script>


</head>

观察箭头。它们应该与文本框大小相同。

我预料到了 -> https://imgur.com/t4kJJ8K

但我得到这个 -> https://imgur.com/qMqlX4U

Answer 1

尝试设置 line-height 图标：

.icons{line-height: 20px;}

Answer 2

我通过重新排序声明并删除一些多余的声明来避免冲突来做到这一点。 @ross 帮助批判性地思考手头的问题。这里是声明。

<link href="dist/css/customStyle.css" rel="stylesheet">
    <link href="dist/css/tabulator.min.css" rel="stylesheet">
    <link href="dist/css/funnelStyles.css" rel="stylesheet">
    <link href="dist/css/uploaderStyles.css" rel="stylesheet">
    <link href="dist/css/dropdownStyles.css" rel="stylesheet">
    <script type="text/javascript" src="dist/js/tabulator.min.js"></script>


    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        .custom-combobox {
            position: relative;
            display: inline-block;
        }

        .custom-combobox-toggle {
            position: absolute;
            top: 0;
            bottom: 0;
            margin-left: -1px;
            padding: 0;
        }

        .custom-combobox-input {
            margin: 0;
            padding: 5px 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="dist/js/dropdown.js"></script>

    <!-- Resources for charts-->
    <script type="text/javascript" src="dist/js/d3.js"></script>
    <script type="text/javascript" src="dist/js/d3-funnel.js"></script>
    <script type="text/javascript" src="dist/js/funnelScript2.js"></script>
    <script type="text/javascript" src="dist/js/dropdown.js"></script>

下拉箭头的大小比平常小

Size of drop-down arrow is smaller then usual

combobox

jquery-ui