选择输入字段中的垂直对齐和使用填充

时间:2016-12-02 10:01:43

标签: html css forms select input

您好,我正在尝试使用带有覆盖标签的inputfieled构建表单。

问题是我想在输入字段的内容中添加填充以正确对齐字段的值。这适用于我的常规文本输入字段,但不适用于选择输入字段。

有人可以告诉我它为什么不起作用吗?

展示的最佳方式是fiddlehttps://jsfiddle.net/pmrcdzbu/



<div class="inputgroup">
            <select class="input filled" id="dropdown">
                <option value="1">Collect</option>
                <option value="2">Electronic transfer</option>
                <option value="3">Private</option>
                <option value="4">Cash</option>
            </select>
            <div class="errorTooltip errorTooltipRequired ng-binding ng-scope" id="etntavq">Verplicht</div>
            <label for="billingLine1" id="billingLine1Label" class="binding">Payment method</label>
            <div class="browse-btn" id="dropdown-btn">
                <i class="fa fa-caret-down" aria-hidden="true"></i>
            </div>
        </div>
<style>
.Container .input, .Container .input option {
            height: 49px;
            width: 100%;
            padding: 0 14px;
            padding-top: 16px;
            border-radius: 5px;
            background-clip: padding-box;
            border: 1px solid #c5ccd1;
            color: #000;
            -webkit-transition: border-color .3s ease 0s;
            transition: border-color .3s ease 0s;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
            background: none;
            display: block;
            vertical-align: top;
            font-size: 1.2em;
        }
 </style>
&#13;
&#13;
&#13;

还有第二件事我希望能够单击按钮然后自动取消选择字段。我在堆栈上搜索但是找到了正确的答案

1 个答案:

答案 0 :(得分:1)

重置选择输入的默认浏览器样式

select {
    -webkit-appearance: none;
    -moz-appearance : none;
}

有关详细信息,请参阅此回复https://stackoverflow.com/a/27006590/5610732