HTML+CSS makes div tag add delete icon in the upper right corner sample code

1. Requirements description

Display the delete icon in the upper right corner of the Div tag

2. Implementation

html, CSS

3. Reference Code

<style>
.container{
        width:60px;
        height:60px;
        border: 1px dotted red;
        position:relative;
}
.content{
        position:relative;
        top:20px;
}
.delete{
        width:20px;
        height:20px;
        border-radius:60%;
        position:absolute;
        top:-10px;
        right:-10px;
}
</style>
<div class="container">
        <img src="http://www.iconpng.com/download/png/61252" class="delete" onclick="alert(1)"/>
        <div class="content">content</div>
</div>
<div class="container">
        <img src="http://www.iconpng.com/download/png/61252" class="delete"/>
        <div class="content">content</div>
</div>

Appendix: How should I write the CSS style to add a small icon to the left of the input box?

<!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>Untitled Document</title>
<style>
.text{border:solid 2px #ccc;width:400px;height:40px;background:url(http://d.lanrentuku.com/down/png/1211/blueberry/user_friend.png) no-repeat 0 center;}
.text input{float:left;border:none;background:none;height:40px;line-height:30px;width:100%; text-indent:32px;}
 
</style>
</head>
 
<body>
<div class="text">
    <input type="text"/>
</div>
</body>
</html>

Summarize

This is the end of this article about how to use html+css to create a div tag with a delete icon in the upper right corner. For more information about the div delete icon in the upper right corner, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Detailed explanation of the Svelte implementation principle for simple and easy JavaScript development

>>: How to embed flash video format (flv, swf) files in html files