<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
input[type="text"] {
width: 50%;
padding: 0px;
}
input::-ms-clear {
display: none;
}
.treeSpan {
background: darkgrey url(./image/tree.png) center no-repeat;
background-size: 90% 90%;
display: inline-block;
vertical-align: middle;
border-radius: 0 5px 5px 0;
border: darkgrey 1px solid;
width: 30px;
height: 30px;
outline: 0px;
}
.divTable {
display: table;
width: 776px;
margin: 10%;
}
.divInput {
display: table-row;
padding: 5px;
height: 30px;
text-align: left;
}
.inputContent {
height: 30px;
display: table-cell;
border-radius: 5px 0 0 5px;
border: darkgrey 1px solid;
padding: 5px;
vertical-align: middle;
outline: 0px;
}
.inputContent:focus {
border-color: aquamarine;
}
.inputTree {
background: url(./image/tree.png) no-repeat;
background-size: 1rem 1rem;
background-position: right center;
display: table-cell;
border-radius: 5px;
border: darkgrey 1px solid;
width: auto;
height: 30px;
}
.inputTree:focus {
border-color: cyan;
outline: 0px;
}
</style>
<script type="text/javascript">
function fnopenDialog() {
window.open("", "dialog1", "width=400px,height=500px,left=200px,top=200px");
}
</script>
</head>
<body>
<div class="divTable">
<div class="divInput">
<input type="text" class="inputContent" id="demo" />
<span class="treeSpan" onclick="fnopenDialog()"></span>
</div>
<div class="divInput">
<input type="text" class="inputTree" id="demo1" onclick="fnopenDialog()" />
</div>
</body>
</html>
记一次简单的input标签美化的尝试
最新推荐文章于 2023-06-28 10:50:05 发布