Jason Kelly Jason Kelly - 2 years ago 98
CSS Question

Positioning the down arrow button to the right of an input box

I really need your help with this tricky problem. Maybe a fresh set of eyes will be the remedy. I am attempting to try and position my down arrow button to the right of an input box but to no avail. How can you make the width of an input box expand and size to its parent element, while at the same time nicely positioning the down arrow beside it. Here is pic of my problem:

enter image description here

Here is the desired/end result:

enter image description here

Here is the HTML & CSS in question:

<!DOCTYPE html>



<style type="text/css">
* {
font-family: Segoe UI;
font-size: 9pt;
.dropdown dd, .dropdown dt, .dropdown ul {
margin: 0px;
padding: 0px;
.dropdown dd {
position: relative;
.dropdown:hover {
.dropdown dt {
border:1px solid #d4ca9a;
width: 170px;
.dropdown dt input[type=text] {
border: 0;
width: 100%;
box-sizing: border-box;
.dropdown dt input[type=button] {
border: 0;
width: 15px;
margin: 0;
padding: 0;
position: relative;

.dropdown dd ul {
border: 1px solid #d4ca9a;
color: #000;
display: block;
left: 0px;
padding:5px 0px;
min-width: 170px;
.dropdown dd ul li {
padding: 5px;
display: block;
.dropdown dd ul li:hover {
background-color: #d0c9af;
cursor: pointer;

<script type="text/javascript">



<dl class="dropdown">
<input id="fileno" type="text">
<input type="button" value="&#9660;" id="btn_arrow">
<li>United Kingdom</li>
<li>United States</li>


Answer Source

The easiest way to position your arrow would be using absolute positionning. For this to work, the parent must have position:relative. Something like this should give you the expected results:

.dropdown dt {
    position: relative;
.dropdown dt input[type=button] {
    position: absolute;
    top: 0;
    right: 0;

You can also see this fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download