精华内容
下载资源
问答
  • 有一种有下拉菜单的选择项,用和组合编写 在制作过程你可能会遇到这样的问题: 这里的框没有达到理想效果: 这是没有达到理想效果的代码 如何改进呢?删掉 size="2"就有小三角和输入框 想要...

    在制作一些填写信息的表格的时候,会遇到多样的信息填写形式,单选,多选,框内填写等。

    有一种有下拉菜单的选择项,用<select></select>和<option></option>组合编写

    在制作过程你可能会遇到这样的问题:


    这里的框没有达到理想效果:


    这是没有达到理想效果的代码


    如何改进呢?删掉 size="2"就有小三角和输入框


    想要更加完美的视觉效果有“请选择…”省“请选择”区“

    只需要多加一个选项<option value="XUANZE">请选择…</option>在已有选项最前端


    点击小三角就有需要的选项了

    ps:要有框框省框框区,文字”省“”区“要写在<select><option></option></select>之后


    献上全部代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>form</title>
    </head>
    <body>
    <form action="https://www.baidu.com" method="get">
    <table border="1">
        
    <thead style="width:1400px;height:40px">
        <tr>
            <td colspan="2" style="text-align:center"><h2>加盟申请表</h2></td>
        </tr>
    </thead>
    <tbody style="width:1400px;height:10px;">
        <tr>
            <td><span style="color:blue">注:打*为必填项</span></td>
            <td></td>
        </tr>
    </tbody>
    
        <tr>
            <td style="text-align:center">代理申请基本信息</td>
            <td></td>
        </tr>
        <tr>
             <td style="text-align:center">申请人姓名<span style="color:red">*</span></td>
            <td><input type="text" name="xingming" placeholder="请输入名字"/></td>
        </tr>
        <tr>
            <td style="text-align:center">籍贯<span style="color:red">*</span></td>
            <td><select name= "province">
                <option value="XUANZE">请选择…</option>
                <option value="guangdong">广东</option>
               <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="hunan">湖南</option>
                <option value="xinjiang">新疆</option>
                <option value="hainan">海南</option>
                <option value="taiwan">台湾</option>
                </select>省
                <select name="district">
                    <option value="XUANZE">请选择…</option>
                    <option value="qu1">区1</option>
                    <option value="qu2">区2</option>
                    <option value="qu3">区3</option>
                    <option value="qu4">区4</option>
                    <option value="qu5">区5</option>
                    <option value="qu6">区6</option></select>区
            </td>
        </tr>
        <tr>
            <td style="text-align:center">性别<span style="color:red">*</span></td>
            <td><input type="radio" name="sex" value="M">男<input type="radio" name="sex" value="F"> 女 </td>
        </tr>
        <tr>
            <td style="text-align:center">身份证号<span style="color:red">*</span></td>
            <td><input type="text" name="id" placeholder="请输入证件号"/></td>
        </tr>
        <tr>
            <td style="text-align:center">联系地址<span style="color:red">*</span></td>
            <td><input type="text" name="address" placeholder="请输入联系地址"/></td>
        </tr>
        <tr>
            <td style="text-align:center">电话<span style="color:red">*</span></td>
            <td><input type="text" name="tel" placeholder="请输入电话"/></td>
        </tr>
        <tr>
            <td style="text-align:center">电子邮箱<span style="color:red">*</span></td>
            <td><input type="text" name="email" placeholder="请输入电子邮箱"/></td>
        </tr>
        <tr>
            <td style="text-align:center">加盟地区<span style="color:red">*</span></td>
            <td><input type="text" name="place" placeholder="请输入地区"/></td>
        </tr>
        <tr>
            <td style="text-align:center">你是从哪里了解我们的?</td>
            <td>
                <input type="checkbox" name="baidu"/>baidu
                <input type="checkbox" name="google"/>Google
                <input type="checkbox" name="tvad"/>电视广告
                <input type="checkbox" name="nwspaper"/>报刊杂志
                <input type="checkbox" name="roadad"/>路牌广告
            </td>
        </tr>
        <tr>
            <td></td>
            <td><span style="color:red">点击查看“Android”项目网上加盟免责声明</span> <a href="https://www.baidu.com"><span style="color:blue">[点击查看</span>]</a></td>
        </tr>
    <tfoot style="width:1400px;height:10px">
        <tr>
            <td ></td>
            <td><input type="submit"></td>
        </tr>
    </tfoot>
    </table>
        
    </form>
    
    
    
    
    </body>
    </html>



    
    






    展开全文
  • <!DOCTYPE html> <html> <head> ...meta charset="utf-8">...下拉菜单</title> <style> .select { margin: 50px 500px; width: 180px; text-align:...
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>下拉菜单</title>
    		<style>
    			.select {
    				margin: 50px 500px;
    				width: 180px;
    				text-align: center;
    			}
    			
    			.select a {
    				color: #fff;
    				text-decoration: none;
    			}
    			
    			.select ul,
    			.select li {
    				margin: 0;
    				padding: 0;
    				list-style: none;
    			}
    			
    			.select span {
    				line-height: 46px;
    				background-color: #41b1d9;
    				display: block;
    				margin-bottom: 20px;
    				position: relative;
    				z-index: 2;
    				border-radius: 5px;
    				-webkit-transition: all .2s ease-in;
    				transition: all .2s ease-in;
    			}
    			
    			.select span a:after{
    				content: " ";
    				display: inline-block;
    				width: 0;
    				height: 0;
    				font-size: 0;
    				line-height: 0;
    				border-bottom: solid 6px #fff;
    				border-left: solid 4px transparent;
    				border-right: solid 4px transparent;
    				vertical-align: 1px;
    				margin-left: 10px;
    				-webkit-transition: all .2s ease-in;
    				transition: all .2s ease-in;
    			}
    			
    			/*给以整体的阴影和圆角 但是不能overflow*/
    			.drop {
    				left: 0;
    				right: 0;
    				top: -9999px;
    				box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
    				border-radius: 5px;
    				position: absolute;
    				z-index: 1;
    				-webkit-transform: translateY(-50px);
    				transform: translateY(-50px);
    				opacity: 0;
    				-webkit-transition: all .2s ease-in;
    				transition: all .2s ease-in;
    			}
    			
    			/*给送个下拉助攻*/
    			.select:hover span{
    				background-color: #1f93bc;
    			}
    			
    			.select:hover span a:after{
    				-webkit-transform: rotate(180deg);
    				transform: rotate(180deg);
    			}
    			
    			.select:hover .drop{
    				position: static;
    				opacity: 1;
    				-webkit-transform: translateY(0);
    				transform: translateY(0);
    			}
    			
    			/*一个很重要的三角形*/
    			.drop li:first-child:before {
    				content: " ";
    				font-size: 0;
    				line-height: 0;
    				margin: 0 auto;
    				display: block;
    				box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); /*配合整体一样的投影*/
    				background-color: #fff;
    				width: 10px;
    				height: 10px;
    				-webkit-transform: rotate(45deg); 
    				transform: rotate(45deg); /*一个正方形倾斜四十五度就是三角了  但是要把下半部分藏起来*/
    				position: relative;
    				top: -5px; /*果断的露出上半部分*/
    				z-index: 1; /*果断的隐藏下半部分*/
    				-webkit-transition: all .2s ease-in;
    				transition: all .2s ease-in;
    			}
    			.drop li a {
    				color: #888;
    				line-height: 46px;
    				border-bottom: solid 1px #eee;
    				font-size: 14px;
    				display: block;
    				background-color: #fff; /*要有背景色才能盖住呀*/
    				position: relative;
    				z-index: 2; /*这里很重要 要挡住三角形的下半部分*/
    				-webkit-transition: all .2s ease-in;
    				transition: all .2s ease-in;
    			}
    
    			/*以下两块 控制第一个和最后一个LI要圆角  因为最外边的div没有overflow 也不可以overflow*/
    			.drop li:first-child a{
    				border-top-left-radius: 5px;
    				border-top-right-radius: 5px;
    				margin-top: -10px;
    			}
    			.drop li:last-child a{
    				border-bottom-left-radius: 5px;
    				border-bottom-right-radius: 5px;
    				border-bottom: none;
    			}
    			
    			/*hover事件给了li  先改变三角 再改变a*/
    			.drop li:hover:before{
    				background-color: #41b1d9;
    			}
    			.drop li:hover a {
    				background-color: #41b1d9;
    				color: #fff;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="select">
    			<span><a href="javascript:void(0);">鼠标浮上来</a></span>
    			<div class="drop">
    				<ul>
    					<li>
    						<a href="javascript:void(0);">下拉菜单一</a>
    					</li>
    					<li>
    						<a href="javascript:void(0);">下拉菜单二</a>
    					</li>
    					<li>
    						<a href="javascript:void(0);">下拉菜单三</a>
    					</li>
    					<li>
    						<a href="javascript:void(0);">下拉菜单四</a>
    					</li>
    				</ul>
    			</div>
    		</div>
    	</body>
    
    </html>
    
    展开全文
  • 本篇文章主要介绍html+css+js下拉列表小三角,感兴趣的朋友参考下,希望对大家有所帮助。gadf.zijisanjiclass{width: 220px;border: 1px solid rgba(0,0,0,.15);background-color: #fff;padding: 10px;top :0px;...

    本篇文章主要介绍html+css+js下拉列表小三角,感兴趣的朋友参考下,希望对大家有所帮助。

    gadf

    .zijisanjiclass{

    width: 220px;

    border: 1px solid rgba(0,0,0,.15);

    background-color: #fff;

    padding: 10px;

    top :0px;

    position: absolute;

    }

    .datepicker-select-dropdown.datepicker-select-orient-top:before {

    bottom: -7px;

    left: 6px;

    border-bottom: 0;

    border-top: 7px solid rgba(0,0,0,.15);

    }

    .datepicker-select-dropdown:before {

    border-left: 7px solid transparent;

    border-right: 7px solid transparent;

    border-bottom: 7px solid rgba(0,0,0,.15);

    border-bottom-color: rgba(0,0,0,.2);

    }

    .datepicker-select-dropdown:after, .datepicker-select-dropdown:before {

    content: '';

    display: inline-block;

    border-top: 0;

    position: absolute;

    }

    .datepicker-select-dropdown.datepicker-select-orient-top:after {

    bottom: -6px;

    left: 7px;

    border-bottom: 0;

    border-top: 6px solid #fff;

    }

    .datepicker-select-dropdown:after {

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 6px solid #fff;

    }

    .datepicker-select-dropdown.datepicker-select-orient-bottom:after {

    top: -6px;

    }

    .datepicker-select-dropdown.datepicker-select-orient-bottom:before {

    top: -7px;

    }

    .form .form-bordered .form-group>p {

    border-left: 1px solid #efefef;

    }

    .form .form-bordered .form-group {

    margin: 0;

    border-bottom: 1px solid #efefef;

    }

    ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作

    其他

    博士

    硕士

    本科

    专科

    高中

    中专

    初中

    小学

    Search

    Reset

    请选择

    请选择

    请选择

    请选择

    请选择

    请选择

    请选择

    请选择

    请选择

    请选择

    请选择

    请选择

    请选择

    请选择

    请选择

    请选择

    请选择

    请选择

    请选择

    请选择

    请选择

    确定

    jQuery(document).ready(function(){

    $("#userBirthdayid").focus(function(){

    //var offset = this.component ? this.component.parent().offset() : this.element.offset();

    var offset = $(this).offset();

    console.info(offset);

    var paddingTop = $("#zijixiede").css('padding-top');

    console.info(paddingTop);

    var height = $(this).outerHeight(false);

    console.info(height);

    var width = $(this).outerWidth(false);

    console.info(width);

    var scrollTop = $(document).scrollTop();

    console.info(scrollTop);

    var outerHeight = $("#zijixiede").outerHeight();

    console.info(outerHeight);

    var top_overflow = -scrollTop + offset.top - outerHeight;

    console.info(top_overflow);

    var yorient = top_overflow < 0 ? 'bottom' : 'top';

    $("#zijixiede").addClass('datepicker-select-orient-' + yorient);

    var top = offset.top;

    if (yorient === 'top')

    top -= outerHeight + parseInt(paddingTop);

    else

    top += height;

    var left = offset.left;

    console.info(left);

    $("#zijixiede").css({

    top: top,

    left: left

    });

    $("#zijixiede").show();

    });

    $(document).mousedown(function(e){

    if(!($("#zijixiede").find(e.target).length)&&!($("#userBirthdayid").is(e.target)))

    $("#zijixiede").hide();

    });

    $(".quedingbtn").click(function(){

    console.info("拉克建档立卡京东方拉克");

    //return false;

    });

    });

    相关推荐:

    展开全文
  • 场景复现: 使用到的方法(css的网格布局) display:grid 实现步骤 项目场景: 终端: H5 框架: "vant": "^2.11.2", ...下拉菜单三角齐 原因分析: 倒三角的定位,是根据父级元素做的定位,父级元素的宽

    项目场景:

    终端: H5

    框架:

    "vant": "^2.11.2",
    
    "vue": "^2.6.11",
    

    H5页面上使用van-dropdown-menu组件出现了样式错位的问题

    1. 在文字溢出时出现样式问题,
    2. 文字没有达到溢出的条件时没有问题

    问题描述:

    van-dropdown-menu组件文字溢出时中遇到的问题: 下拉菜单倒三角对不齐

    在这里插入图片描述


    原因分析:

    倒三角的定位,是根据父级元素做的定位,父级元素的宽度受倒三角的兄弟元素的影响,倒三角的兄弟元素文字溢出时,导致倒三角的的位置也跟着变化

    解决方案:

    给倒三角的父级元素做网格布局(Grid) 代码如下:
    .van-dropdown-menu {
      .van-dropdown-menu__item {
        justify-content: flex-start;
      }
      .van-dropdown-menu__title {
        display: grid;
        padding: 0;
      }
    }
    
    展开全文
  • 一、不显示小三角 QToolButton::menu-indicator { image: none; } 二、小三角居中显示 QToolButton::menu-indicator:image { subcontrol-origin: margin; subcontrol-position: bottom center; margin-top: 5...
  • 经典的 div + css 鼠标 hover 下拉菜单效果图:源码:nav {margin:100px auto;text-align:center;}nav ul {border-radius:10px;background:linear-gradient(to bottom,#efefef,#bbbbbb);padding:0 20px;display:...
  • 利用样式去掉下拉菜单三角

    千次阅读 2017-07-18 15:23:28
    1、下拉菜单去掉倒三角=====&gt;&gt;style="-webkit-appearance:none;"(360浏览器) appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; -webkit-appearance:...
  • 内容索引:VC/C++源码,界面编程, VC++ 在Form窗体的菜单中添加一个下拉小三角,意在说明该项菜单可以展开,或者有二级项,看似简单,貌似实现起来还真简单,笔者在初学VC的时候就曾被类似问题难倒过,看来,基础的...
  • 源码见:点击打开链接 转载于:https://my.oschina.net/weiqinxue/blog/725157
  • 本文主要实现了QT QToolButton工具按钮中的小三角的位置 在下面并居中显示的样式设置。 QLabel{color:white;} QTabWidget{ background:white; } QTabBar::tab{ background:green; color:white; height:22px; } ...
  • 在Form窗体的菜单栏中添加一个下拉小三角,意思是说该项菜单可以向下展开,就是有二级项,VC 的实例,看上去很简单,但实现起来还真简单,笔者在初学VC的时候就曾被类似问题难倒过,看来,基础的东西更要好好...
  • 主要介绍了CSS导航条菜单之带三角形的实现代码,编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随编过来看看吧
  • Bootstrap 按钮下拉菜单

    2018-03-08 11:17:09
    按钮下拉菜单按钮下拉菜单,就为按钮添加一个下拉菜单,当用户点击按钮时,再显示或隐藏下拉菜单。只需把按钮和下拉菜单包装在一个 .btn-group 中,并为按钮添加 .dropdown-toggle 类和 data-toggle="dropdown&...
  • 类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固。  小三角用了2种不同处理方式:1、利用border属性;2、利用...
  • 效果图: HTML: <div class="select"> <select name="select"> <option>选项一</option> <option>选项二</option> <option>选项三<...opti
  • 标准的C#窗体菜单,带小三角的多级展开菜单
  • 下拉菜单

    2016-09-09 23:53:08
    类似的是,在下拉菜单中我们使用class="dropdown"。它的样式只有一个相对定位。这个相对定位了它是为表单菜单需要显示的内容class="dropdown-menu"准备的。 它是绝对定位。所以它可以用class="pull-left/dropdown-...
  • 表格头部的三角在点击的时候禁止出现下拉菜单,给每一列添加属性menuDisabled:true xtype:'grid', enableColumnResize:false, columns:[ {text: '场景',dataIndex:'ji',menuDisabled:true}, {text: '场号',...
  • 给QPushButton添加菜单的示例,前面已经有了三种方式: Qt学习之给QPushButton添加菜单ActionsContextMenu方法 Qt学习之给QPushButton添加菜单...今天再提供一种方式,就是给QPushButton添加下拉菜单
  • 具体如下:这里介绍一款基于jquery实现的网站下拉菜单,黑色风格,很漂亮,本菜单需要点击主菜单后的小三角符号才下拉出二级菜单,并是有些菜单,是鼠标移上主菜单的时候就滑过,至于哪一种,就看个人的喜好了先来...
  • 效果如下 5、设置背景颜色以及文字颜色,效果如下 代码文件下载 ————来自水平一般的5 我不是技术大牛,但是我喜欢钻研技术,更乐于帮助踏上程序道路的网友们 需要帮助可联系 QQ:1563392709@qq.com,备注:5...
  • Bootstrap 下拉菜单

    2016-03-15 21:37:44
    会自动在.dropdown样式的div元素上再次附加一个.open样式)并且该元素设定为position:relative(直接使用.dropdown样式)的时候,下拉菜单才会正常显示, 注意:设置菜单标题,则为li元素应用.
  • 在实现技术方面,实现该效果的方法也很多,今天就来说说纯CSS样式来实现常见的下拉菜单,有兴趣的伙伴可以参考下:实现效果如下: 鼠标未移上前 鼠标移上后从效果图可以看出,当鼠标移上去的时候,会弹出下拉的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,490
精华内容 3,396
关键字:

下拉菜单不显示小三角