html - 无法让文本框接受输入

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%;
    ...
}