CODEWITHSUNDEEP
htmlcss
ashraj98
ashraj98

Reputation: 384

Can't get text box to take input

I'm trying to make an HTML search form similar to Amazon's. I created the desired look, but when I went to actually try the search the text box wasn't taking any input. At first I thought the text was white or something but after clicking the search button I realized this was not the case. I have tried using Chrome's Inspect Element to see the problem and when I hovered over the input box code, the input box was showing beneath the code.

Here's the JSFiddle.

This is the CSS for the box but I don't see an issue here:

    #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;
    }

I'm not sure whether the other elements are interfering or if something is wrong with the search box. How do I fix this issue?

Upvotes: 0

Views: 236

Answers (1)

resolute_coder
resolute_coder

Reputation: 367

Add float left to .select-style:

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

Lower the width of #search-box input[type="text"]. 80% seems good:

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

Upvotes: 1

Related Questions