可输入可下拉的输入选择框
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
可输入可下拉的输入选择框相关推荐
- 手机端 自定义简单的下拉动画效果选择框 解决过渡失效
手机端 自定义简单的下拉动画效果选择框 解决过渡失效 <template> // 弹出框触发 并显示选择结果<view class="header_top_sel" ...
- .net bootstrap 下拉树状选择框_Bootstrap搭建图书管理系统
https://www.zhihu.com/video/1246932038927360000 每日测验 """ 答案 1. 昨日内容回顾 样式类操作 "&qu ...
- 有关推挽输出、开漏输出、复用开漏输出、复用推挽输出以及上拉输入、下拉输入、浮空输入、模拟输入区别
转自:http://www.cnblogs.com/Jezze/archive/2011/12/23/2299857.html 以及上拉输入.下拉输入.浮空输入.模拟输入的区别 最近在看数据手册的时候 ...
- (转载)有关推挽输出、开漏输出、复用开漏输出、复用推挽输出以及上拉输入、下拉输入、浮空输入、模拟输入区别...
以及上拉输入.下拉输入.浮空输入.模拟输入的区别 最近在看数据手册的时候,发现在Cortex-M3里,对于GPIO的配置种类有8种之多: (1)GPIO_Mode_AIN 模拟输入 (2)GPIO_M ...
- STM32八种IO口模式区别,以及上拉输入、下拉输入、浮空输入、模拟输入的区别
最近在看数据手册的时候,发现在 Cortex-M3 里,对于 GPIO 的配置种类有 8 种之多: (1)GPIO_Mode_AIN 模拟输入 (2)GPIO_Mode_IN_FLOATING 浮空输 ...
- STM32初学篇-推挽输出、开漏输出、复用开漏输出、复用推挽输出以及上拉输入、下拉输入、浮空输入、模拟输入区别
有关推挽输出.开漏输出.复用开漏输出.复用推挽输出以及上拉输入.下拉输入.浮空输入.模拟输入的区别 最近在看数据手册的时候,发现在Cortex-M3里,对于GPIO的配置种类有8种之多: (1)GPI ...
- 上拉输入、下拉输入、浮空输入、模拟输入的区别
以及上拉输入.下拉输入.浮空输入.模拟输入的区别 最近在看数据手册的时候,发现在Cortex-M3里,对于GPIO的配置种类有8种之多: (1)GPIO_Mode_AIN 模拟输入 (2)GPIO_M ...
- STM32 IO口的8中配置方式解读(推挽输出、开漏输出、复用开漏输出、复用推挽输出以及上拉输入、下拉输入、浮空输入、模拟)
转自:http://blog.csdn.net/u010592722/article/details/45746079 STM32 IO口的8中配置方式: (1)GPIO_Mode_AIN 模拟输入 ...
- 【stm32】引脚高低电平、上拉输入与下拉输入
引脚设置为上拉输入与下拉输入: 在按键输入实验中,引脚为输入,按键1默认条件下为高电平,按下后为低电平----设置为上拉输入: 那么什么时候采用浮空输入呢? 答:多用于按键输入,IO状态是不确定的,完 ...
最新文章
- 高速流水线,Jenkins Shared Pipeline
- python 怎么安装电脑摄像头模块_Python模块及安装
- sql sum 结果集不为零_sql语句分类练习题
- java生产者消费者模型到精通_java生产者消费者模型
- Flutter布局锦囊---蜡笔画的表单
- 新一代 Windows 即将发布、GPT-3 成功商业化,这届微软 Build 大会究竟带来了什么?
- 适用于ASP.NET的自定义分页控件
- Unity插件学习记录 -- SW Actions
- Selenium WebDriver-通过键盘事件操作浏览器
- Eureka 自我保护模式、健康检查机制、Eureka 元数据
- add file in debian/source/include-binaries if you want to store the modified binary in the debian
- python模拟鼠标点击linux_Python模拟实现Linux系统unix2dos功能
- win7 怎么干净删除php,Win7环境下彻底清除VBS病毒的教程
- flash cs4 调整渐变工具
- FFmpeg进行推流的两种方法
- 短时傅里叶变换原理解
- 利用微信官方文档下载微信对账单、资金账单
- 已解决-安装CentOS 7时No Caching mode page found和Assuming drive cache:write through报错问题
- c语言主函数如何调用其他函数,SOS、、、、在主函数中调用其他函数
- Anaconda Navigator Applications 缺少Notebook等应用
热门文章
- Apache Shiro<=1.2.4反序列化RCE漏洞
- 基于开源蜜罐的实践与功能扩展
- Linux系统编程:验证kernel内核缓存区大小-4096字节
- 20170910__换电瓶
- Windows 上 GitHub Desktop 的操作
- Hibernate(二)——一对多查询
- Win32API不规则窗口制作
- 不结婚不生孩子,离婚率15连涨,中国正在步入“低欲望社会”吗?
- ffmpeg转码_音视频处理神器FFmpeg
- python平均数 中位数函数_R和python语言如何求平均值,中位数和众数