Question

我正在尝试制作类似于亚马逊的HTML搜索表单。我创建了所需的外观，但当我去实际尝试搜索时，文本框没有任何输入。起初我认为文本是白色的或者其他东西但是在点击搜索按钮后我意识到情况并非如此。我尝试使用Chrome的Inspect Element来查看问题，当我在输入框代码上盘旋时，输入框显示代码。

Here's the JSFiddle.

这是该框的CSS，但我没有看到问题：

    #search-text 
    {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: transparent;
    }

    #search-box input[type="text"]
    {
    width: 90%;
    padding: 11px 0 12px 1em;
    color: #333;
    outline: none;
    }

我不确定其他元素是否在干扰或搜索框是否有问题。我该如何解决这个问题？

Answer 1

将浮动左侧添加到.select-style：

.select-style {
    ...
    float: left;
    ...
}

降低＃search-box input [type =“text”]的宽度。 80％似乎很好：

#search-box input[type="text"] {
    width: 80%;
    ...
}

无法获取文本框以获取输入

1 个答案: