css文本框添加下拉框,css实现文本框和下拉框结合的案例

最新推荐文章于 2025-09-22 23:19:38 发布

转载最新推荐文章于 2025-09-22 23:19:38 发布 · 1.3k 阅读

文章标签：

#css文本框添加下拉框

本文介绍HTML中的表单控件，包括文本框、下拉框等，并探讨了CSS样式在表单中的应用，同时提供了jQuery实现动态效果的方法。

html 代码部分

000000

111111

222222

CSS 部分代码

.list-name-input{

color: #333;

font-family: tahoma, 'Microsoft YaHei', 'Segoe UI', Arial, 'Microsoft Yahei', Simsun, sans-serif;

font-size: 15px;

font-weight: bold;

height: 50px;

margin: 0px;

padding: 0px;

position: relative;

width: 530px;

}

.list-name-for-select{

border:;

color: #555;

height: 20px;

lighting-color: rgb(255, 255, 255);

line-height: 20px;

margin:0 0 10px 0;

outline-color: #555;

outline-offset: 0px;

outline-style: none;

outline-width: 0px;

padding: 4px 6px;

position: absolute;

top: 1px;

left: 3px;

vertical-align: middle;

width: 486px;

}

.list-name-input-for-select:focus{

border:;

border-radius:;

}

.list-select{

background-color: #FFF;

border:1px #ccc solid;

border-radius: 4px;

color: #555;

cursor: pointer;

height: 30px;

left: 0px;

margin:0 0 10px 0;

padding: 4px 6px;

position: absolute;

top: 0px;

vertical-align: middle;

white-space: pre;

width: 530px;

}

效果图

通过jquery来实现文本框和下拉框动态添加效果，能根据自己的需求来自定义最多允许添加数量，实用的jquery动态添加文本框特效

//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

robotframework自动化系列：文本类型的下拉框

对于下拉框定位和输入,这里主要遇到有两种类型的下拉选择. 其中一个类型是select-options格式,如图这种方式的定位可以使用select from list by value或select ...

html之多行文本textarea 及下拉框select(12)

1.多行文本多行文本使用textarea标签,默认值需要写在中间,和input标签不同,name属性用于后台获取数据(request.POST.get(meno))

&lt ...

[ PyQt入门教程 ] PyQt5基本控件使用&colon;单选按钮、复选框、下拉框

本文主要介绍PyQt5界面最基本使用的单选按钮.复选框.下拉框三种控件的使用方法进行介绍. 1.RadioButton单选按钮/CheckBox复选框.需要知道如何判断单选按钮是否被选中. 2.Com ...

html基本标签表单实现交互原理，单选框，复选框，下拉框介绍

表单是什么?表单是前端和服务器做交互的一种机制,表单收集用户输入信息,之后发送或者提交给服务器.用户在输入的信息称之为内容,内容的文本分为普通和密码型,用户通过单选框.复选框.下拉框(也就是下拉菜单) ...

Easyui-combobox-checkbox-带复选框的下拉框

$.post("getSubInsuranceTypeList.do",{parent_id:node.id},function(result){ ...

随机推荐

MVVM架构~knockoutjs系列之级联select

返回目录对于下拉列表框的绑定在之前的knockoutjs文章中已经介绍过,今天主要说一下级联的select,事实上,在knockoutjs里,是以数据绑定为中心的,而数据是以面向对象为前提的,而对于 ...

当滚动条滚动到页面底部自动加载增加内容的js代码

这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...

学习笔记&lowbar;Java&lowbar;day12&lowbar;设计模式MVC(13)&period;JavaWeb的三层框架(14)

MVC 1. 什么是MVC MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Contr ...

在vs2010中编译log4cxx-0&period;10&period;0详细方法

本文一共包含了17个步骤,按照下面的步骤就可以完成vs2010中编译log4cxx的工作了. 1. 下载 log4cxx 以及 apr 和 apr-util 源码: a) http://www.apa ...

HDU 4293 Groups

模型挺好的dp题,其实这道题就是建一个模型然后就很容易想到递推过程了,我们可以把每个人的描述,存到数组a中,a[l][r]表示左边有l个,到第r个这个人所在一层停止...然后就可以写出转移状态方程了. ...

关于commonjs，AMD，CMD之间的异同

1.简介随着前端业务复杂度的增加,模块化成为一个大的趋势.而在ES6还未被浏览器所支持的情况下,commonjs作为ES6中标准模块加载方案,在客服端中的支持情况并不好,现在在客服端中有2中模块化的 ...

unshift() 方法将一个或多个元素添加到数组的开头，并返回新数组的长度

var arr = [1, 2]; arr.unshift(0); //result of call is 3, the new array length //arr is [0, 1, 2] arr ...

[Android Security] 静态分析Android程序——smali文件解析

cp : https://blog.csdn.net/hp910315/article/details/51823236 cp : http://www.jb51.net/softjc/119036. ...

unix系统内核优点

1.可靠性高 unix的可靠性2.伸缩性强 unix的伸缩性3.开放性好 unix的开放性4.网络功能强 unix的网络功能这是UNIX系统的又一重要特色,特别是作为Internet网络技术基础的TC ...

hiho一下第一周最长回文子串

时间限制:1000ms 单点时限:1000ms 内存限制:64MB 描述小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在编程的学习道路上一同前进. 这 ...