使用typeahead.js时，输入字段css已更改

我正在尝试创建这样简单的入口页面

我从上面的示例（以及html源代码）复制了整个文档

现在我尝试将其与typeahead结合起来：我想使用typeahead将电子邮件输入字段替换为“国家名称”，如前所述。 我希望我的输入字段看起来像：

但是前面的类型使它看起来像：

这是我的名片

HTML:
浮动标签-->

国名
挑一个
战略1
战略2
战略3
战略4
记得我吗
下一个
&复制；2018年研发

CSS:

    :root {
    --input-padding-x: .75rem;
    --input-padding-y: .75rem;
}

html,
body {
    height: 100%;
}

body {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f5f5f5;
}

.form-signin {
    width: 100%;
    max-width: 420px;
    padding: 15px;
    margin: 0 auto;
}

.form-label-group {
    position: relative;
    margin-bottom: 1rem;
}

.form-label-group > input,
.form-label-group > label {
    padding: var(--input-padding-y) var(--input-padding-x);
}

.form-label-group > label {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    margin-bottom: 0; /* Override default `<label>` margin */
    line-height: 1.5;
    color: #495057;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
    color: transparent;
}

.form-label-group input:-ms-input-placeholder {
    color: transparent;
}

.form-label-group input::-ms-input-placeholder {
    color: transparent;
}

.form-label-group input::-moz-placeholder {
    color: transparent;
}

.form-label-group input::placeholder {
    color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
    padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
    padding-bottom: calc(var(--input-padding-y) / 3);
}

.form-label-group input:not(:placeholder-shown) ~ label {
    padding-top: calc(var(--input-padding-y) / 3);
    padding-bottom: calc(var(--input-padding-y) / 3);
    font-size: 12px;
    color: #777;
}

：根目录{
--输入-padding-x:.75rem；
--输入-padding-y:.75rem；
}
html，
身体{
身高：100%；
}
身体{
显示：-ms flexbox；
显示：-网络工具包盒；
显示器：flex；
-ms-flex-align：居中；
-ms-flex-pack:center；
-webkit框对齐：居中；
对齐项目：居中；
-webkit盒包：中心；
证明内容：中心；
填充顶部：40px；
填充底部：40px；
背景色：#F5；
}
.表格签名{
宽度：100%；
最大宽度：420px；
填充：15px；
保证金：0自动；
}
.表格标签组{
位置：相对位置；
边缘底部：1rem；
}
.表格标签组>输入，
.表格标签组>标签{
填充：var（--input-padding-y）var（--input-padding-x）；
}
.表格标签组>标签{
位置：绝对位置；
排名：0；
左：0；
显示：块；
宽度：100%；
页边距底部：0；/*覆盖默认的``页边距*/
线高：1.5；
颜色：#495057；
边框：1px实心透明；
边界半径：.25rem；
过渡：所有.1都易于输入输出；
}
.表单标签组输入：：-webkit输入占位符{
颜色：透明；
}
.表单标签组输入：-ms输入占位符{
颜色：透明；
}
.表单标签组输入：：-ms输入占位符{
颜色：透明；
}
.表单标签组输入：：-moz占位符{
颜色：透明；
}
.form标签组输入：：占位符{
颜色：透明；
}
.表单标签组输入：非（：显示占位符）{
填充顶部：计算（var（--input-padding-y）+var（--input-padding-y）*（2/3））；
填充底部：计算值（var（--input-padding-y）/3）；
}
.form标签组输入：不（：显示占位符）~label{
填充顶部：计算值（var（--input-padding-y）/3）；
填充底部：计算值（var（--input-padding-y）/3）；
字体大小：12px；
颜色：#777；
}

快速查看您的小提琴，当您将字体头与引导程序集成时，似乎会导致字体大小/类型发生变化或输入字段高度发生变化（不是100%确定）。在任何情况下，如果您查看CSS，第一个条目是：

:root {
    --input-padding-x: .75rem;
    --input-padding-y: .75rem;
}

这将设置填充高度和填充宽度

.75rem

，用于显示错误的输入字段：

.form-label-group > input,
.form-label-group > label {
    padding: var(--input-padding-y) var(--input-padding-x);
}

---

有很多方法可以解决这个问题，我不确定在你的情况下什么方法最有效。可能需要将

--input-padding-x

和

--input-padding-y

调整为更适合表单元素的大小，或者您可能需要将

.form label group>input

和

.form label group>label

类的填充改为硬编码。希望这能帮助您，或者至少能让您直接找到正确的方向。

不确定它是否与当前的css定义有关。如果我尝试删除整个css代码，则在发出警报后，输入字段的大小也会改变

.form-label-group > input,
.form-label-group > label {
    padding: var(--input-padding-y) var(--input-padding-x);
}