2019独角兽企业重金招聘Python工程师标准>>>

PC

<div class="row form-horizontal">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><span class="mark-btn">*</span>落款部门</label>
                                <div class="col-sm-8">
                                    <div>
                                        <!--select标签和input外面的span标签的格式是为了使两个位置在同一位置,控制位置-->
                                        <span style="position:absolute;width:235px;"> 
                                            <select name="aabb" id="aabb" class="form-control" 
                                            onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;"> 
                                            <!--下面的option的样式是为了使字体为灰色,只是视觉问题,看起来像是注释一样--> 
                                                <option value="" style="color:#c2c2c2;">---请选择---</option> 
                                                <option value="闲人书库">闲人书库</option> 
                                                <option value="闲人BLOG">闲人BLOG</option> 
                                            </select> 
                                        </span>
                                        <span style="position:absolute;width:200px;margin:1px;"> 
                                            <input type="text" name="ccdd" id="ccdd" placeholder="可选择也可输入的下拉框" class="form-control" style="border:0;height: 32px;"> 
                                        </span>

</div>
                                </div>
                            </div>
                        </div>
                    </div>

移动端===================================
<div class="weui_cell weui_cell_select weui_select_after">
            <div class="weui_cell_hd">落款部门</div>
            <div class="weui_cell_bd weui_cell_primary" style="
    height: 44px;
">

<!--select标签和input外面的span标签的格式是为了使两个位置在同一位置,控制位

置-->
                                        <span style="position:absolute;width: 80%;"> 
                                            <select name="aabb" id="aabb" class="weui_select" οnchange="javascript:document.getElementById

('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;" style="
    opacity: 0;
"> 
                                            <!--下面的option的样式是为了使字体为灰色,只是视觉问题,看起来像是注

释一样--> 
                                                <option value="" style="color:#c2c2c2;">---请选择---

</option> 
                                                <option value="闲人书库">闲人书库</option> 
                                                <option value="闲人BLOG">闲人BLOG</option> 
                                            </select> 
                                        </span>
                                        <span style="position:absolute;width: 65%;z-index: 2;"> 
                                            <input type="text" name="ccdd" id="ccdd" placeholder="可选择也可输

入的下拉框" class="weui_input" style="border:0;padding-left: 15px;height: 44px;line-height: 44px;"> 
                                        </span>

</div>
        </div>

优化后========================

<div class="weui_cell weui_cell_select weui_select_after">
        <div class="weui_cell_hd">地点</div>
        <div class="weui_cell_primary" style="height: 44px;">
            <span style="position:absolute;width: 80%;"> 
                <select name="placeName" id="placeName" class="weui_select" οnchange="changePlaceFunc();" style="opacity: 0;">
                    <option value="0" style="color:#c2c2c2;">---请选择---</option>  
                    <option value="1">本班教室</option>
                    <option value="2">多媒体教室</option>
                    <option value="3">操场</option>
                    <option value="4">其他</option>
                </select> 
            </span>
            <span style="position:absolute;width: 55%;z-index: 2;top:10px;"> 
                <input class="weui_input" id="place" name="place" maxlength="30" type="text" placeholder="请输入地点" style="border:0;padding-left: 15px;height: 20px;"> 
            </span>
            <i class="fa fa-plus-circle" aria-hidden="true" style="position: absolute;right: 15px;top: 14px;color: #04BE02;font-size:18px"></i>
        </div>
    </div>

转载于:https://my.oschina.net/u/3356110/blog/1558217

可输入可下拉的输入选择框相关推荐

  1. 手机端 自定义简单的下拉动画效果选择框 解决过渡失效

    手机端 自定义简单的下拉动画效果选择框 解决过渡失效 <template> // 弹出框触发 并显示选择结果<view class="header_top_sel" ...

  2. .net bootstrap 下拉树状选择框_Bootstrap搭建图书管理系统

    https://www.zhihu.com/video/1246932038927360000 每日测验 """ 答案 1. 昨日内容回顾 样式类操作 "&qu ...

  3. 有关推挽输出、开漏输出、复用开漏输出、复用推挽输出以及上拉输入、下拉输入、浮空输入、模拟输入区别

    转自:http://www.cnblogs.com/Jezze/archive/2011/12/23/2299857.html 以及上拉输入.下拉输入.浮空输入.模拟输入的区别 最近在看数据手册的时候 ...

  4. (转载)有关推挽输出、开漏输出、复用开漏输出、复用推挽输出以及上拉输入、下拉输入、浮空输入、模拟输入区别...

    以及上拉输入.下拉输入.浮空输入.模拟输入的区别 最近在看数据手册的时候,发现在Cortex-M3里,对于GPIO的配置种类有8种之多: (1)GPIO_Mode_AIN 模拟输入 (2)GPIO_M ...

  5. STM32八种IO口模式区别,以及上拉输入、下拉输入、浮空输入、模拟输入的区别

    最近在看数据手册的时候,发现在 Cortex-M3 里,对于 GPIO 的配置种类有 8 种之多: (1)GPIO_Mode_AIN 模拟输入 (2)GPIO_Mode_IN_FLOATING 浮空输 ...

  6. STM32初学篇-推挽输出、开漏输出、复用开漏输出、复用推挽输出以及上拉输入、下拉输入、浮空输入、模拟输入区别

    有关推挽输出.开漏输出.复用开漏输出.复用推挽输出以及上拉输入.下拉输入.浮空输入.模拟输入的区别 最近在看数据手册的时候,发现在Cortex-M3里,对于GPIO的配置种类有8种之多: (1)GPI ...

  7. 上拉输入、下拉输入、浮空输入、模拟输入的区别

    以及上拉输入.下拉输入.浮空输入.模拟输入的区别 最近在看数据手册的时候,发现在Cortex-M3里,对于GPIO的配置种类有8种之多: (1)GPIO_Mode_AIN 模拟输入 (2)GPIO_M ...

  8. STM32 IO口的8中配置方式解读(推挽输出、开漏输出、复用开漏输出、复用推挽输出以及上拉输入、下拉输入、浮空输入、模拟)

    转自:http://blog.csdn.net/u010592722/article/details/45746079 STM32  IO口的8中配置方式: (1)GPIO_Mode_AIN 模拟输入 ...

  9. 【stm32】引脚高低电平、上拉输入与下拉输入

    引脚设置为上拉输入与下拉输入: 在按键输入实验中,引脚为输入,按键1默认条件下为高电平,按下后为低电平----设置为上拉输入: 那么什么时候采用浮空输入呢? 答:多用于按键输入,IO状态是不确定的,完 ...

最新文章

  1. 高速流水线,Jenkins Shared Pipeline
  2. python 怎么安装电脑摄像头模块_Python模块及安装
  3. sql sum 结果集不为零_sql语句分类练习题
  4. java生产者消费者模型到精通_java生产者消费者模型
  5. Flutter布局锦囊---蜡笔画的表单
  6. 新一代 Windows 即将发布、GPT-3 成功商业化,这届微软 Build 大会究竟带来了什么?
  7. 适用于ASP.NET的自定义分页控件
  8. Unity插件学习记录 -- SW Actions
  9. Selenium WebDriver-通过键盘事件操作浏览器
  10. Eureka 自我保护模式、健康检查机制、Eureka 元数据
  11. add file in debian/source/include-binaries if you want to store the modified binary in the debian
  12. python模拟鼠标点击linux_Python模拟实现Linux系统unix2dos功能
  13. win7 怎么干净删除php,Win7环境下彻底清除VBS病毒的教程
  14. flash cs4 调整渐变工具
  15. FFmpeg进行推流的两种方法
  16. 短时傅里叶变换原理解
  17. 利用微信官方文档下载微信对账单、资金账单
  18. 已解决-安装CentOS 7时No Caching mode page found和Assuming drive cache:write through报错问题
  19. c语言主函数如何调用其他函数,SOS、、、、在主函数中调用其他函数
  20. Anaconda Navigator Applications 缺少Notebook等应用

热门文章

  1. Apache Shiro<=1.2.4反序列化RCE漏洞
  2. 基于开源蜜罐的实践与功能扩展
  3. Linux系统编程:验证kernel内核缓存区大小-4096字节
  4. 20170910__换电瓶
  5. Windows 上 GitHub Desktop 的操作
  6. Hibernate(二)——一对多查询
  7. Win32API不规则窗口制作
  8. 不结婚不生孩子,离婚率15连涨,中国正在步入“低欲望社会”吗?
  9. ffmpeg转码_音视频处理神器FFmpeg
  10. python平均数 中位数函数_R和python语言如何求平均值,中位数和众数