CSS自定义WEB控件

最新推荐文章于 2024-04-19 17:27:11 发布
最新推荐文章于 2024-04-19 17:27:11 发布
阅读量1.1k 收藏
点赞数
分类专栏： CSS/样式 管理者/开发者
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shenzhenNBA/article/details/8710445
版权

WEB开发有时需要自定义控件，这样更好看，网上已经有很多，收集如下，很多都用到CSS3的功能，下面就列举滚动条，下拉列表，复选框，单选钮进行举例，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>scrollBar</title>
<style type="text/css">
/*==============ScrollBar style==============*/
div.div02{width:300px; height:300px; overflow:scroll; overflow-x:hidden; border:0px solid blue; 
padding:20px; font-family: "Microsoft Yahei"; font-size:14px;
/*--ie core--*/
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 #D7DCE0 transparent -*/
scrollbar-track-color:transparent;/*- 滑道 -*/
}

/*--webkit core--*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 15px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 0px;
	background-color:rgba(110,110,110,1);
	padding:5px 0px;
}
/*定义上下公共按钮的样式*/
::-webkit-scrollbar-button {
	border-radius: 0px;
    background: rgba(110,110,110,1); 
	margin:3px 0px;
	padding:3px 0px;
    /* background-image: url(Images/bgpic01.gif) */
}
	
/*定义增加箭头的样式*/	
::-webkit-scrollbar-button:vertical:increment { 
    background-image: url(Images/up-down-arrow.png);
    background-repeat: no-repeat;
    background-position: center -17px;
}
	
/*定义减少箭头的样式*/	
::-webkit-scrollbar-button:vertical:decrement { 
    background-image: url(Images/up-down-arrow.png);
    background-repeat: no-repeat;
    background-position: center 0px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: rgba(195,195,195,1); 
    -webkit-box-shadow:intset 0px 0px 6px rgba(0,0,0,0.6); 
}

::-webkit-scrollbar-thumb:window-inactive {
    /* background-color: red; */
}

/*==============combox button style==============*/
select { background-image:url(Images/ComboBoxBG.png.gif); background-color:transparent; background-repeat: no-repeat; 
line-height: 30px; border-radius: 4px; box-shadow: 0px 1px 2px rgba(255,255,255,1); height: 30px; -webkit-appearance: none;
 -moz-appearance: none; padding-right: 34px; background-position: right top; border-left: 1px solid #8d8d8d; 
border-top-style: none; border-right-style: none; border-bottom-style: none; width: auto; min-width:100px;}
select:hover {background-position:right -32px;} /*修改自定义图片的位置*/
select:disabled {background-position:right -64px;}
select:focus {background-position:right -96px; border-color:1px solid #CCC;}

select > option { border: 6px solid black; box-shadow: 0px 1px 2px rgba(0,0,0,0.5); -webkit-appearance: none; 
background-color: #5a5a5a; opacity: 0.1; line-height: 30px; height: 30px; color: #FFF; }
select > option:hover { background: #94a2a2 url(none); color: #666666; }

/*==============Check button style==============*/
label.CheckboxButton { line-height:30px; height:30px; text-align:left; vertical-align:top; font-size:14px; 
font-family: "Microsoft Yahei",verdana,arial;}
input[type="checkbox"] { appearance:none; -webkit-appearance:none; -ms-appearance:none; -moz-appearance:none; 
-o-appearance:none; background:url(Images/CheckBox.png) no-repeat 0px 0px; width:20px; height:30px; margin:0px; 
padding:0px; cursor:pointer; color:#2c2d2e; border:0px; line-height:30px; display:inline-block;}
input[type="checkbox"]:hover { background-position:0px -30px;} /*修改自定义图片的位置*/
input[type="checkbox"]:checked { background-position:0px -60px;}
input[type="checkbox"]:disabled { background-position:0px -90px;}

/*==============Radio button style==============*/
label.RadioButton { line-height:30px; height:30px; text-align:left; vertical-align:top; font-size:14px; 
font-family: "Microsoft Yahei",verdana,arial;}
input[type="radio"] { appearance:none; -webkit-appearance:none; -ms-appearance:none; -moz-appearance:none; 
-o-appearance:none; background:url(Images/RadioButton.png) no-repeat 0px 0px; width:20px; height:30px; 
margin:0px; padding:0px; cursor:pointer; color:#2c2d2e; border:0px; line-height:30px; display:inline-block;}
input[type="radio"]:hover { background-position:0px -30px;} /*修改自定义图片的位置*/
input[type="radio"]:checked { background-position:0px -60px;}
input[type="radio"]:disabled { background-position:0px -90px;}
</style>
</head>
<body>
<p class="title01">
User define scrollBar，combox, checkbox, radio button style
</p>
<p>
<div id="div02" class="div02">
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
<p>自定义滚动条.......</p>
</div>
</p>
<p>
<select name="select1" id="select1">
<option value="item1" selected="selected">selected item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
<option value="item4">item4</option>
<option value="item5">item5</option>
<option value="item6">item6</option>
</select>
</p>

<p>
<label for="CheckboxGroup1_0" class="CheckboxButton">
<input type="checkbox" name="CheckboxGroup1" value="复选框1" id="CheckboxGroup1_0" />复选框1 
</label>
<label for="CheckboxGroup1_1" class="CheckboxButton">
<input type="checkbox" name="CheckboxGroup1" value="复选框2" id="CheckboxGroup1_1" />复选框2
</label>
<br />
<label for="CheckboxGroup1_3" class="CheckboxButton">
<input type="checkbox" name="CheckboxGroup1" value="复选框3" id="CheckboxGroup1_3"/>复选框3
</label>
<label for="CheckboxGroup1_4" class="CheckboxButton">
<input type="checkbox" name="CheckboxGroup1" value="复选框4" id="CheckboxGroup1_4" disabled="disabled" />复选框4  [disabled]
</label>
<br />
</p>


</p>
<form name="form1" id="form1" action="#">
<p>
<label for="shuiguo" class="RadioButton"><input type="radio" name="shuiguo" id="shuiguo" value="shuiguo1"/> 水果1 </label>
<label for="shuiguo2" class="RadioButton"><input type="radio" name="shuiguo" id="shuiguo2" value="shuiguo2" />水果2 </label>
<label for="shuiguo3" class="RadioButton"><input type="radio" name="shuiguo" id="shuiguo3" value="shuiguo3" />水果3</label>
<label for="shuiguo4" class="RadioButton"><input type="radio" name="shuiguo" id="shuiguo4" value="shuiguo4" disabled="disabled"/>水果4 [disabled] </label>
</p>
</body>
</html>

图片可以自己根据需要绘制，同时需要注意位置跟CSS中的定义一致即可。

//更新一下新效果的webkit引擎下的scrollbar样式，

/* start: webkit core 设置滚动条的样式 */
::-webkit-scrollbar {width:10px;}
::-webkit-scrollbar:horizontal{ height:10px;}
::-webkit-scrollbar-track { 
    border-radius: 0px;
	background-color:#6e6e6e;
	padding:5px 0px;
}
::-webkit-scrollbar-button {
	border-radius: 0px;
	-ms-border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	margin:3px 0px;
	padding:3px 0px;
	background-color:#6e6e6e;
}
/* ::-webkit-scrollbar-button:vertical:start:decrement */
::-webkit-scrollbar-button:vertical:increment {  /* vertical button */
    background-image: url(../../Images/up-down-arrow.png); 
    background-repeat: no-repeat; 
    background-position: center -17px; 
}
::-webkit-scrollbar-button:vertical:decrement { 
    background-image: url(../../Images/up-down-arrow.png);
    background-repeat: no-repeat;
    background-position: center 0px;
}
::-webkit-scrollbar-button:horizontal:increment {  /* horizontal button */
    background-image: url(../../Images/left-right-arrow.png); 
    background-repeat: no-repeat;
    background-position:-17px center ;
}
::-webkit-scrollbar-button:horizontal:decrement { 
    background-image: url(../../Images/left-right-arrow.png); 
    background-repeat: no-repeat;
    background-position:0px center ;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
	background: rgba(195,195,195,1); 
    -webkit-box-shadow:intset 0px 0px 6px rgba(0,0,0,0.6);	
	font-size:10px;
	text-align:center; 
	vertical-align:middle;		
}
::-webkit-scrollbar-thumb:horizontal {
background-repeat:repeat-x;
border:2px solid #6e6e6e;
}

::-webkit-scrollbar-thumb:vertical {
background-repeat:repeat-y;
border:2px solid #6e6e6e; 
}
::-webkit-scrollbar-thumb:window-inactive {
  background-color:rgba(195,195,195,1);  /* thumb color when blur */
}
::-webkit-scrollbar-corner{width:10px; height:10px; background-color:#6e6e6e;}

/* end: webkit core 设置滚动条的样式 */


shenzhenNBA
关注
专栏目录
web 自定义控件
12-04
5. **Autocomplete**：自动完成（Autocomplete）是另一种常见的Web控件，主要用于输入框，根据用户输入的内容动态给出建议，常见于搜索框或表单输入。实现这个功能，开发者通常需要监听用户的输入事件，然后从服务器...
HTML中自定义组件
weixin_51679573的博客
11-28 955
customElements、attachShadow
原生html如何实现自定义组件？
qq_42036752的博客
06-10 1313
在web component中也提供相应的生命周期函数可以监听到元素被挂载或者移除等动作，并且通过static get observedAttributes方法返回需要监听的自定义属性数组当属性值发生改变时就会触发attributeChangedCallback这个生命周期函数。原生自定义组件的好处是自身就像是一个暗箱，隔离了自身和外界的style不会存在样式冲突的问题，只能通过自己实现改变元素的样式。
HTML5 Web Components技术如何自定义元素？
JessicaAustin的博客
04-19 875
Web Components允许我们创建可复用的自定义元素，这些元素可以在多个不同的项目中重复使用，提高了开发效率和代码复用性。Web Components是一组不同的技术的集合，允许你创建可复用的自定义元素——与你的HTML和DOM完全集成的新类型。影子DOM是一个附加到元素上的隐藏DOM树，它允许我们将样式和行为封装在自定义元素内部，而不会影响到主文档中的其他元素。元素添加到了自定义元素的影子DOM中。在上面的示例中，我们在构造函数中创建了一个div元素，并将其添加到了自定义元素的影子DOM中。
vue组件、html里引用vue.js，实现自定义组件，子父组件相互传参、vue2组件、vue3组件用法、component、组件传值
柠檬酸
11-12 6632
vue自定义组件，vue2、vue3自定义组件，子组件传值、父组件传值、component、 vue.js与h5混合使用，实现自定义组件，子组件向父组件传值，父组件向子组件传值，
前端自定义html组件,前端程序员手把手教你——HTML 自定义元素
weixin_39535125的博客
06-20 634
组件是 Web 开发的方向，现在的热点是 JavaScript 组件，但是 HTML 组件未来可能更有希望。 本文就介绍 HTML 组件的基础知识：自定义元素(custom elements)。​一、浏览器处理我们一般都使用标准的 HTML 元素。Hello World上面代码中，就是标准的 HTML 元素。如果使用非标准的自定义元素，会有什么结果？Hello World上面代码中，就是非标准元素...
如何通过javascript操作web控件的自定义属性
10-26
本文将详细介绍如何通过JavaScript来操作Web控件的自定义属性，这对于增强用户体验和简化后端逻辑具有重要意义。 首先，让我们理解什么是自定义属性。在.NET框架或类似的服务器端技术中，Web控件（如ASP.NET的...
关于asp.net 自定义分页控件
10-27
同时，控件也可以通过在web.config中进行配置，以达到全局配置的效果。 自定义分页控件可以根据不同场景使用不同的分页方式。文章中提到了两种常用的分页方式，一是使用UpdatePanel进行Ajax分页，二是使用Url重写...
自定义Web的上传控件
04-03
总之，自定义Web的上传控件是一项涉及HTML、CSS和JavaScript综合运用的任务。通过理解和利用现代Web技术，我们可以创建出既美观又功能强大的上传组件，提升用户体验，同时确保对各种浏览器的良好兼容性。在实现过程...
自定义GridView控件 代码
08-09
在.NET开发环境中，GridView控件是ASP.NET Web Forms中常用的数据展示组件，它允许开发者以表格形式展示数据源中的信息。然而，有时我们可能需要更高级的功能，比如自定义分页，这超出了默认GridView控件的能力。在...
纯js+css自定义form表单美化控件
01-06
这是一款纯js和css制作的一个用户注册界面的美化表单空间，将文本框和单选框、复选框等空间全部从新设计美化。效果演示地址：http://www.xwcms.net/js/bddm/55798.html
常用的html控件,包含自定义控件
02-16
常用的html控件,.net Menu,treetable,dhtmlxTabbar,dhtmlxGrid
自定义WebForm控件集
06-20
包括 分页控件,验证码控件,密码强度检测等,还包含了一个FreeTextBox的源码
HTML5 Web Components如何自定义和扩展Web元素？
最新发布
LindRoland的博客
04-19 1811
在Web开发中，HTML5的Web Components提供了一种强大的机制，使我们能够创建可重用的自定义元素，并扩展现有的Web元素。自定义元素允许我们创建全新的HTML元素，而扩展现有元素则可以在现有元素的基础上添加新的功能或修改其行为。Web Components是HTML5引入的一组不同的技术，允许你创建可重用的自定义元素——与你的网页或应用使用的其他HTML元素一样。通过使用Shadow DOM，我们可以将自定义元素的样式和行为封装在内部，避免与其他元素的样式和行为发生冲突。
前端自定义html组件,前端编辑器-自定义html模板
weixin_32367041的博客
06-20 672
1、webstorm 自定义html模板我们需要找到设置创建模板的地方,步骤如下:File -> settings -> Editor -> File and Code Templates找到这个位置,我们就会看见这个界面,在导航栏的右侧部分的左上角有个+号我们就可以开始创建模板了,如上图所示,Name所对应的地方是用来写HTML模板的名字, 这会方便我们选择的是哪一个...
HTML5的Web Components技术如何实现自定义元素？
ElvaRaleign的博客
04-18 590
随着 Web 技术的不断发展，相信 Web Components 将在未来发挥更加重要的作用，为开发者提供更加灵活和强大的工具来构建出色的 web 应用。随着 Web 技术的不断发展，相信 Web Components 将在未来发挥更加重要的作用，为开发者提供更加灵活和强大的工具来构建出色的 web 应用。这些自定义元素是新的、可重用的、封装功能的自定义 HTML 标签。Shadow DOM 是一种将隐藏的 DOM 树附加到元素的方式，这个隐藏的 DOM 树不会影响主 DOM 树，但它会渲染在元素上。
一、最简单的自定义web控件
拓
01-25 820
1、创建项目VS2005创建一个类库名称为：WebControl2、添加 一个web自定义控件类，名称为MailLink.cs 3、添加属性在 MailLink 示例中，我们需要添加 Email 和 Text 属性。为了正确配置这些属性，我们不仅必须编写代码，还要分配几个特性。 [Bindable(true), Category("Appearance"), Defau
"ASP.NET 2.0自定义Web控件创建技术
在ASP.NET 2.0中，我们可以利用其提供的功能来创建自定义Web控件，以满足我们的特定需求。 创建自定义Web控件的过程通常包括以下几个步骤： 首先，我们需要在ASP.NET项目中添加一个新的控件类。这个类将继承自ASP...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值