Within my form, there is a field for entering the City Name. However, I am currently experiencing an issue with aligning the down-arrow. As of now, I have aligned it to the right using the background property.
This is how it looks:
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right white;
https://i.sstatic.net/kwbw0.png
Unfortunately, the arrow is touching the border of the div. My goal is to add some spacing from the right so that there is equal spacing all around.
I have attempted adding padding, margin, left, and right properties, but the entire div shifts along with the city code.
Could someone please help me identify the exact issue here?
EDIT: Added snippet of the code
.cityName {
display: flex;
max-width: 300px;
margin: 0 auto;
}
.form-inputs{
background: #FFFFFF;
border-radius: 5px;
height: 50px;
width: 100%;
padding: 0 10px;
font-weight: normal;
font-size: 18px;
line-height: 21px;
color: #445566;
margin-bottom: 10px;
}
.cityName select {
width: 90px;
margin-left: 10px;
}
.cityName select.city-short{
position: relative;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right white;
background-size: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}<label for="lastName" class="cityName">
<input type="text" id="cityName" placeholder="Enter City Name" class="city validated form-inputs">
<select class="city-short form-inputs">
<option selected="" value="" >NA
</option>
<option selected="" value="" >US
</option>
</select>
</label>