Beautification and function of div imitating checkbox form style-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Beautification and function of div imitating checkbox form style

不言

Jun 21, 2018 pm 05:13 PM

beautify form style

The checkbox style is not good-looking, p imitates the checkbox form style beautification and function, the material is at the bottom, friends in need can refer to the

p imitation checkbox form style beautification and function (the checkbox style is not good-looking) material At the bottom:
Rendering:

##window.css

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

.bj { 
position: absolute; 
top: 0; 
left: 0; 
bottom: 1px; 
width: 100 % ; 
height: 980px; 
z - index: 9; 
background - color: #000; 
filter: alpha(opacity = 50); - moz - opacity: 0.5; - khtml - opacity: 0.5; 
opacity: 0.5; 
} 
.window { 
position: absolute; 
top: 106px; 
left: 33 % ; 
width: 466px; 
background - color: #fff; 
color: #000; 
border - bottom: 1px solid#dbdcdd; 
padding - bottom: 8px; 
overflow: hidden; 
z - index: 10; 
}.window.top { 
width: 416px; 
padding: 0px 25px 0 25px; 
height: 48px; 
line - height: 48px; 
font - size: 18px; 
background - color: #ececec; 
border - bottom: 1px solid#d8d8d8; 
overflow: hidden; 
}.window.top.close { 
float: right; 
margin - top: 14px; 
}.window.top span { 
padding: 0 6px; 
} 
.window.add { 
width: 394px; 
margin: 0 auto; 
padding - top: 10px; 
font - size: 15px; 
color: #686868; 
overflow: hidden; 
}.window.add dd, 
.window.add dt { 
width: 100 % ; 
padding - bottom: 8px; 
line - height: 38px; 
overflow: hidden; 
}.window.add span { 
float: left; 
width: 69px; 
overflow: hidden; 
}.window.add dd input { 
width: 314px; 
height: 36px; 
line - height: 36px; 
border: 1px solid#c9c5c1; 
background - color: #f2f2f2; 
font - family: "微软雅黑", 
"宋体"; 
font - size: 15px; 
color: #686868; 
}.window.add dt input { 
vertical - align: middle; 
margin - right: 10px; 
}.window.add dt label { 
margin - right: 10px; 
margin - left: 20px; 
}.window.add dt label.perlabel { 
margin - left: 0px; 
}.window.add dd input.two { 
width: 192px; 
height: 33px; 
line - height: 33px; 
border: none; 
background: url(&#39;../images/input09.gif&#39;) no - repeat; 
margin - right: 13px; 
}.window.add dd a { 
margin - left: 10px; 
font - size: 16px; 
}.window.add dt.button { 
text - align: center; 
padding - top: 8px; 
}.window.add dt.button input { 
width: 103px; 
height: 41px; 
line - height: 39px; 
text - align: center; 
border: none; 
background: url(&#39;../images/input06.gif&#39;) no - repeat; 
margin: 0 5px; 
font - family: "微软雅黑", 
"宋体"; 
font - size: 15px; 
color: #686868; 
}.window.post { 
width: 420px; 
}.window.post span { 
width: 86px; 
}.window.post dt { 
line - height: 26px; 
}.window.post dt span { 
height: 108px; 
line - height: 108px; 
}.window.post dt label { 
width: 100px; 
float: left; 
}.window.post dt label.perlabel { 
float: none; 
}.window.post textarea { 
width: 312px; 
height: 62px; 
line - height: 24px; 
border: 1px solid#c9c5c1; 
background - color: #f2f2f2; 
font - family: "微软雅黑", 
"宋体"; 
font - size: 14px; 
color: #686868; 
}.window.post dd input.three { 
width: 238px; 
margin - right: 10px; 
}.window. 
default { 
width: 
406px; 
} 
.window. 
default span { 
width: 
52px; 
}.window. 
default dd select { 
width: 
38px; 
margin: 
0 6px; 
}.window. 
default dd textarea { 
width: 
350px; 
}.window. 
default dd b { 
float: 
right; 
margin - right: 5px; 
font - weight: normal; 
}.window. 
default dd b input { 
width: 
auto; 
height: 
auto; 
margin - right: 5px; 
}

Copy after login

css in the page

<span style="font-size:12px;"><style type="text/css"> 
.window{ 
left:25%; 
width:676px; 
} 
.window .top{ 
width:626px; 
} 
.window span{ 
font-family:"微软雅黑"; 
font-weight: bold; 
} 
.window .post{ 
width:645px; 
} 
.window .post label{ 
font-size: 13px; 
} 
.window dl{ 
margin-left:25px !important; 
} 
.window .post hr{ 
width:230px; 
text-align: left; 
margin-bottom: 20px; 
} 
.window .add dd p{ 
width:125px; 
float:left; 
vertical-align: middle; 
height: 18px; 
line-height: 18px; 
} 
.custom_checkbox_self{ 
width:18px; 
height:18px; 
text-indent:100px; 
overflow:hidden; 
float:left; 
background:url(../images/custom_checkbox.png); 
margin-right:10px; 
} 
</style></span>

Copy after login

js function:

function openJoinSetting(){ 
var joinSetting = document.getElementById(&#39;joinSetting&#39;); 
joinSetting.style.display=&#39;block&#39;; 
joinSetting.style.visibility=&#39;visible&#39;; 
document.getElementById(&#39;back2&#39;).style.display=&#39;block&#39;; 
document.getElementById(&#39;wiSsetting&#39;).style.display=&#39;block&#39;; 
} 
$(document).ready(function(){ 
$(".custom_checkbox_self").click(function(){ 
if($(this).text().trim()=="0"){ 
$(this).css("background","url(../images/custom_checkbox_checked.png)"); 
$(this).text(&#39;1&#39;); 
}else{ 
$(this).css("background","url(../images/custom_checkbox.png)"); 
$(this).text(&#39;0&#39;); 
} 
}); 
});

Copy after login

Window code:

<p id="joinSetting" style="display: none; visibility: hidden; "> 
<p id="back2" class="bj"></p> 
<p id="wiSsetting" class="window"> 
<p class="top"> 
<a href="javascript:closealbum();" class="close"><img 
src="../images/icon03.gif" alt="关闭" /> </a>申请表必填项设置</p> 
<dl class="add post"> 
<dd> 
<span>基本信息</span><br/> 
<hr/> 
<p><p id="MemberName" style="width:18px;" class="custom_checkbox_self">0</p><label for="MemberName">姓名</label></p> 
<p><p id="Phone" style="width:18px;" class="custom_checkbox_self">0</p><label for="Phone">手机</label></p> 
<p><p id="Company" style="width:18px;" class="custom_checkbox_self">0</p><label for="Company">企业</label></p> 
<p><p id="Post" style="width:18px;" class="custom_checkbox_self">0</p><label for="Post">企业职位</label></p> 
<p><p id="applyPosiGuid" style="width:18px;" class="custom_checkbox_self">0</p><label for="applyPosiGuid">申请职务</label></p> 
</dd> 
<dd> 
<span>详细信息</span><br/> 
<hr/> 
<p><p id="Hometown" style="width:18px;" class="custom_checkbox_self">0</p><label for="Hometown">籍贯</label></p> 
<p><p id="Gender" style="width:18px;" class="custom_checkbox_self">0</p><label for="Gender">性别</label></p> 
<p><p id="Birthday" style="width:18px;" class="custom_checkbox_self">0</p><label for="Birthday">生日</label></p> 
<p><p id="Nation" style="width:18px;" class="custom_checkbox_self">0</p><label for="Nation">民族</label></p> 
<p><p id="Party" style="width:18px;" class="custom_checkbox_self">0</p><label for="Party">政治面貌</label></p> 
<p><p id="IdentityCard" style="width:18px;" class="custom_checkbox_self">0</p><label for="IdentityCard">身份证</label></p> 
<p><p id="EducationLevel" style="width:18px;" class="custom_checkbox_self">0</p><label for="EducationLevel">学历</label></p> 
<p><p id="Telephone" style="width:18px;" class="custom_checkbox_self">0</p><label for="Telephone">电话</label></p> 
<p><p id="Fax" style="width:18px;" class="custom_checkbox_self">0</p><label for="Fax">传真</label></p> 
<p><p id="Email" style="width:18px;" class="custom_checkbox_self">0</p><label for="Email">邮箱</label></p> 
</dd> 
<dd> 
<span>企业信息</span><br/> 
<hr/> 
<p><p id="CompanyAddress" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyAddress">地址</label></p> 
<p><p id="CompanyStaffNumber" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyStaffNumber">员工数</label></p> 
<p><p id="CompanyLegalPerson" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyLegalPerson">法人代表</label></p> 
<p><p id="CompanyCreatedDate" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyCreatedDate">成立时间</label></p> 
<p><p id="CompanyProperty" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyProperty">企业性质</label></p> 
<p><p id="CompanyIsPublic" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyIsPublic">是否上市</label></p> 
<p><p id="CompanyIndustry" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyIndustry">所属行业</label></p> 
<p><p id="CompanyWebsite" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyWebsite">网址</label></p> 
<p><p id="CompanyAssets" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyAssets">企业资产</label></p> 
</dd> 
<dd> 
<span>附件</span><br/> 
<hr/> 
<p><p id="CompanyPicUrl" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyPicUrl">营业执照复印件</label></p> 
<p><p id="IdentityPicUrl" style="width:18px;" class="custom_checkbox_self">0</p><label for="IdentityPicUrl">身份证照片</label></p> 
<p style="width:150px;"><p id="PersionPicUrl" style="width:18px;" class="custom_checkbox_self">0</p><label for="PersionPicUrl">个人名片照片</label></p> 
</dd> 
<dt class="button"> 
<input name="" type="submit" value="确认" onclick=""/> 
<input name="" type="button" value="取消" onclick="" /> 
</dt> 
</dl> 
</p> 
</p>

Copy after login

This is a pop-up layer form selection.

Picture material:

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to solve the problem that Firefox uses offsetHeight to get the height of a div when it is 0

The above is the detailed content of Beautification and function of div imitating checkbox form style. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Roblox: Dead Rails - How To Tame Wolves

4 weeks ago By DDD

Roblox: Grow A Garden - Complete Mutation Guide

2 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1659

CakePHP Tutorial

1415

Laravel Tutorial

1310

PHP Tutorial

1258

C# Tutorial

1232

Related knowledge

Use ThinkPHP6 to implement a beautiful 404 page Jun 20, 2023 am 11:06 AM

As the Internet develops, many websites or applications have gradually become more complex. When users use it, they often encounter error pages, the most common of which is the 404 page. The 404 page means that the page being accessed does not exist and is a common error page. For websites or applications, a beautiful 404 page can greatly improve the user experience. In this article, we will introduce how to use ThinkPHP6 to quickly implement a beautiful 404 page. Create a route First, we need to create an err in the route folder

How to beautify word Mar 19, 2024 pm 08:31 PM

When we edit word documents, we always hope to make the documents more beautiful and beautiful. However, when it comes to word beautification, many people think of making the fonts and colors more personalized, and adjusting the margins and line spacing. Wait, in fact, we can make word more beautiful through more operations. For example, we can make word documents more beautiful by inserting pictures, modifying borders, etc. Next we will try to use border patterns to make word documents more beautiful, let’s learn together! First, open a new Word document, and then find the [Paragraph] tool under the [Home] tab. Next, click the [Border] option, as indicated by the red arrow in the image. 2. After we click, the system will automatically pop up a drop-down selection

Beautify your user interface with new JavaFX CSS stylesheets in Java 13 Jul 30, 2023 pm 02:49 PM

Use the new JavaFXCSS style sheet in Java13 to beautify the user interface Introduction: In software development, the beauty and ease of use of the user interface are crucial to improving the user experience. JavaFX is a modern, expressive interface technology on the Java platform that provides rich UI components and functions. In order to make the user interface more beautiful, JavaFX provides CSS style sheets to beautify and customize the interface. In Java13, JavaFX introduced new CSS style sheets,

Use JavaScript to implement custom styles and prompts for forms Jun 15, 2023 pm 02:41 PM

With the popularity of web applications, forms have become an indispensable part of our daily work. When we use a form, we usually need to enter some basic information to submit to the backend for processing. However, traditional forms have some shortcomings, whether in terms of aesthetics or operational friendliness. Therefore, in this article, we will focus on how to use JavaScript to implement custom styles and prompts for forms. 1. To realize the style customization of the form. To realize the style customization of the form, we first need to understand

How to beautify training PPT so that the "ugly duckling" can become a "white swan" Mar 19, 2024 pm 09:01 PM

Most institutions will use courseware when training people in certain aspects. Excellent lecturers paired with high-quality PPT can better help students understand. How to modify your PPT? This article will tell you the answer. Let’s take a look first. Excellent courseware has the same characteristics: clear logic, concise text, and rich pictures and texts. 1. Let’s first find a picture as an example. You can observe it first. Through observation and analysis, we can find the following problems: 2. Let’s take the first step in making modifications - find styles (you can browse some websites to find inspiration, such as Huaban.com) 3. The second step is to find color matching . You can draw colors based on the styles you find. 4.Here we use calligraphy

How to implement scroll bar beautification in Vue Nov 07, 2023 am 08:57 AM

How to beautify scroll bars in Vue In the process of developing web applications, we often encounter the need to beautify scroll bars. The default scroll bar style may not meet our design requirements, so we need to use some CSS techniques to beautify the scroll bar. This article will introduce how to implement scroll bar beautification in Vue and provide specific code examples. First, we need to install a plug-in for beautifying scroll bars. Currently the more commonly used plug-ins include PerfectScrollbar and SimpleBa

How to beautify the win10 desktop. The editor will teach you how to beautify it. Jan 11, 2024 pm 08:15 PM

It has been a few days since win10 was released and upgraded. There will definitely be a lot of things that are not used to the new desktop and new experience, but some people don’t like it. Also, win10 has just been released and the desktop is not perfect yet. For students with obsessive-compulsive disorder, it looks messy. Friends who want other systems or more desktops, don’t miss it. Below, the editor will share with you how to beautify win10. The desktop is the first interface we see every time we turn on the computer. Many computer enthusiasts like to beautify the desktop, but most of them only stop at changing the desktop wallpaper, icons, or fonts. Although win10 is a new system, many new features are very convenient for everyone, but there are some optimizations that are not very satisfactory. For this reason, the editor has brought a win10 desktop

Essential skills for beautifying UI interface: Sharing experience in CSS development projects Nov 02, 2023 pm 01:00 PM

Essential skills for beautifying UI interfaces: CSS development project experience sharing In today’s digital era, user interface (UI) has become a crucial part of software and website development. An attractive and easy-to-use user interface can increase the user's favorable impression of the product or service and enhance the user experience. CSS, as a technology used to define web page styles, plays a vital role in beautifying the UI interface. This article will share some experience and essential skills in CSS development projects to help you create an elegant and attractive user interface.

See all articles