如何将自定义按钮添加到 Bootstrap 输入
How to add custom button to Bootstrap Input
我能找到的最接近的是:
input[data-icon] {
padding-left: 25px;
background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat left;
background-size: 20px;
}
但是一旦 JQuery 的验证图标出现,这个图标就会被删除。
我知道 Bootstrap 输入组可以添加和附加图标,但这些图标已被保留用于其他用途(在我的项目中)。
此外,我希望添加的图标也可以点击。添加为背景图片无效。
给你...
这正是您想要的。该图标也是可点击的。请参阅下面的代码段。
function myFunction() {
alert("I am clickable!");
}
.input-icon:hover {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" data-auto-replace-svg="nest"></script>
</head>
<body>
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">@</span>
<div class="input-wrapper d-flex align-items-center position-relative">
<input type="text" class="form-control ps-4" id="my-input" placeholder="E-mail" aria-label="Username" aria-describedby="addon-wrapping">
<label for="my-input" class="fa fa-user input-icon position-absolute px-2" onclick="myFunction()"></label>
</div>
</div>
</body>
</html>
我能找到的最接近的是:
input[data-icon] {
padding-left: 25px;
background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat left;
background-size: 20px;
}
但是一旦 JQuery 的验证图标出现,这个图标就会被删除。
我知道 Bootstrap 输入组可以添加和附加图标,但这些图标已被保留用于其他用途(在我的项目中)。
此外,我希望添加的图标也可以点击。添加为背景图片无效。
给你...
这正是您想要的。该图标也是可点击的。请参阅下面的代码段。
function myFunction() {
alert("I am clickable!");
}
.input-icon:hover {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" data-auto-replace-svg="nest"></script>
</head>
<body>
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">@</span>
<div class="input-wrapper d-flex align-items-center position-relative">
<input type="text" class="form-control ps-4" id="my-input" placeholder="E-mail" aria-label="Username" aria-describedby="addon-wrapping">
<label for="my-input" class="fa fa-user input-icon position-absolute px-2" onclick="myFunction()"></label>
</div>
</div>
</body>
</html>