CSS: How to make dropdown in input box not overlap with long text?

Question

I have aa dropdown menu inside my input box. When the text gets really long, the text and the drop down overlap. Using css, how can I make sure that no matter how long the text is, the drop down and text will never overlap?

Current Output:

Desired output:

HTML and css for input box:

HTML and CSS for the dropdown:

Answer 1

As we don't know your code structure this is still a guesswork, but mostly you can achieve this by setting a padding-right value a bit higher than the width of the dropdown like this:

JS Fiddle

 .input-field { padding: 5px; padding-right:100px; /* something like this */ font-size: 1em; width: 300px; } .input-select{ height:29px; color:skyblue; font-weight:bold; border:none; outline:none; margin-left:-95px; } 

 <input type="text" class="input-field" placeholder="input text"> <select class="input-select"> <option value="">Google</option> <option value="">Yahoo</option> <option value="">Bing</option> <option value="">Wikipedia</option> </select> 

Answer 2

将此添加到您的CSS：

#can_edit {background-color: white;}

Answer 3

 form{ width: 50%; margin: 10px auto; } .parent{ overflow: hidden; } input{ width: 100%; } select{ padding: 1px; float: right; } 

 <form> <select> <option>value 1</option> <option>value 2</option> </select> <div class="parent"> <input type="text"> </div> </form>