Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.5k views
in Technique[技术] by (71.8m points)

请问怎么实现在input里添加小竖线和图标?

怎么实现如下图的效果呢?
image.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

image

<html><head>
<style>
.demo {
    border: 0.25em solid #FFF;
    box-shadow: 0 0 0 2px #369;
    padding: 0 0 0 1.75em;
    box-sizing: border-box;
    font-size: 24px;
    line-height: 1.5em;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABXUlEQVRIia1Wy3GDMBClBJego5j3NOMOrBLSQSjBHZgO4g5CB04H0IHpIO4AdZAcIvBGfCTAzOgitO+z7GrJsoSHpDXGnAC8G2NOWmuVEhcFJXkj2ZH8CReAb5IXpdRhFbBS6uCBR6AzqwNQJIFrrRWAuwh2AK4kbXCmAFAFjj6iyiU4gGvMPkkLoBUx59nDUlGy5aewVrixo0P+gw7KU8ElCUnnMeol9W51VTwxzkLkMXTgtqoPcPo0lXLTLuZvHUHjcZpJgr0dSrJcJNgDLgkAPCYJ9qZIFEszbGqt1Zb6nyF4eJwqfNE3yriG08GPs0JlDW9Nk6ig6V7q7ZHs1jZbILCcUyCvi/uoGxPAAbSxw4W855cGihdUT8yGZWGexAWBNYBPkheSNz/N5CxoRUycxA+Vr4Rp5vqc+ypKJxFEZ18hwwJQ5Xn+NuH+H8lLfg4iJPblBFn257x3+Av2MQil5StOlQAAAABJRU5ErkJggg==') left 0em center no-repeat,linear-gradient(to right, transparent 30px, #000 31px, transparent 32px);
}
</style>
</head>
<body>
<input type="text" class="demo">
</body>
</html>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...