以引导形式选择字段高度

Question

选择字段的大小受到引导程序文件的影响，如屏幕截图所示，我无法找到解决此问题的方法。

    <form>
       <div class="form-group">
       <label for="name" class="labstyle">Enter Your Name</label>
       <input type="text" class="form-control" name="name" size="20" 
        maxlength="40" placeholder="Enter You Name" required autofocus>
       </div>
           <div class="form-group">
        <label for="sell" class="labstyle">Chose Your Wish:</label>
       <select class="form-control" id="sell">
       <option value="0" hidden="hidden" disabled="" selected="">Chose Your 
        Wish</option>
       <option value="morning">Good Morning</option>
        <option value="night">Good Night</option>
     </select>
      </div>  
      <div class="form-group">
         <label for="message" class="labstyle">Message</label>
         <textarea class="form-control"  name="message" rows="3" cols="40" 
    placeholder="Optional" maxlength="92"></textarea>
      </div>
      <button type="submit" class="btn" id="btncustom">Create</button>
     </form>

Answer 1

在以下情况下添加以下内容将正确计算高度。

select.form-control:not([size]):not([multiple]) {
  height: auto!important;
}

Answer 2

好的，在您的自定义select.form-control课程中，尝试减少line-height属性，例如：

line-height: 1.0;

或者可能是一个很小的值。

Answer 3

在自定义样式表（css文件）中添加此类。

.form-control{
    height:30px;
    line-height:30px;
    padding:6px;
    }

Answer 4

将此内容添加到您的CSS中即可解决问题

#sell.form-control{
height: 46px important!;
}

Answer 5

将此内容包含在abc.component.ts

中

styles: [`
:host /deep/ select.form-control:not([size]):not([multiple]) {
  height: auto!important;
  padding: 0.375rem 0.75rem;
}`]