input能输入又能下拉选择同时改变向下箭头为图片的方法

本文介绍了input能输入又能下拉选择同时改变向下箭头为图片的方法，实现原理：把select前半部分进行隐藏，然后加上input标签！修改select右侧的下拉箭头样式，则是用到了背景图片的原理。一起看看详情介绍吧。

关于input能输入又能下拉选择同时改变向下箭头为图片的方法。

先看效果图：

直接上代码：

CSS代码

.SelectInput{position: relative;margin-left: 25px;height: 45px; line-height: 45px; border-bottom: 1px #eeeeee solid;}
.SelectInput .SIleft{width: 65px; float: left;}
.SelectInput .SIright{float: right;width: 195px;}
.SelectInput .SIright .spanA{ position: absolute; overflow: hidden; width: 198px; height: 40px; clip: rect(-1px 190px 190px 170px); }
.SelectInput .SIright .spanA select{width: 194px; height: 20px; border: 0; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url(/sustenance-a/images/you.png)no-repeat scroll right center transparent; background-size: 16px; padding-right: 14px; margin-top: 13px;}
.SelectInput .SIright .spanA select option{font-size: 14px;}
.SelectInput .SIright .spanB{ position: absolute; width: 155px; height: 40px;}
.SelectInput .SIright .spanB input{ width: 180px; height: 30px; border: 0pt; text-align: right;color: #777;}

DIV代码

<div class="SelectInput">
    <div class="SIleft">用药方法</div>
    <div class="SIright">
        <span class="spanA">
            <select name="makeupCoSe" id="makeupCoSe" onChange="changeF();"> 
                <option id='1' value='选项一'>选项一</option> 
                <option id='2' value='选项二'>选项二</option> 
                <option id='3' value='选项三'>选项三</option>
            </select> 
        </span> 
        <span class="spanB">
            <input type="text" name="makeupCo" id="makeupCo" placeholder="输入或选择" value=""> 
        </span> 
    </div>
</div>

JS代码

<script language="javascript"> 
//用药方法-输入或选择
function changeF() 
{ 
document.getElementById('makeupCo').value= 
document.getElementById('makeupCoSe').options[document.getElementById('makeupCoSe').selectedIndex].value; 
} 
</script> 

以上就是关于input能输入又能下拉选择同时改变向下箭头为图片介绍的所有内容，有此需要的可以直接复制代码放模板里面。