15621857753

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

来源:齐鲁建站 栏目:建站教程 阅读: 日期:2021-07-19

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

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

先看效果图:

input选择功能,select改图片

直接上代码:

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能输入又能下拉选择同时改变向下箭头为图片介绍的所有内容,有此需要的可以直接复制代码放模板里面。

响应式网站建设

展开