如何在输入文本框内放置“复制到剪贴板”图标？

问题描述 投票：0回答：1

我正在设计一个密码生成器，但在尝试将“复制到剪贴板”图标放置在将生成密码的输入文本框中时遇到问题。

我尝试将文本框和图标放置在弹性容器内，以便它们水平居中。 然后，我尝试使用 padding-right 将图标“推”到文本框内，但这只是推了文本框和我不想要的图标。

任何人都可以提供见解吗？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
  <title>Home</title>
</head>
<body>
  <section id="container">
     <div id="main-flex-container">
      <h1>Generate a <br><span>random password</span></h1>
      <h2>Never use an insecure password again.</h2>
    </div>
    <div id="input-flex-container">
      <input type="text" id="password" readonly>
      <img src="clipboard.png">
    </div>

  </section>
  <script src="script.js"></script>
</body>
</html>



body{
  margin: 0;
}

#container{
  background-color: #1F2937 ;
  width: 650px;
  height: 475px;
  margin: 0 auto;
  margin-top: 100px;
  border-radius: 12px;
}

#main-flex-container{
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  margin-left: -40px;
  padding-top: 30px;
  font-size: 48px;
  font-family: Karla;
  font-weight: 700;
  color: #ffffff;
}

span{
  color: #4ADF86;
}

h2{
  margin-top: -20px;
  margin-bottom: 40px;
  font-size: 24px;
  color: #ffffff;
  font-family: Inter;
  font-weight: 400;
}

#input-flex-container{
  display: flex;
  justify-content: center;
}

input {
  width: 440px;
  height: 35px;
  border: none;
  border-radius: 6px;
}

input:focus{
  outline: none;
}
css responsive-design position css-position textfield
1个回答
0
投票

将

position: relative
添加到
#input-flex-container
，使其成为图像的位置参考。然后将以下设置应用于图像：

#input-flex-container img {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(215px, -50%);
}

这是有效的，因为您有固定的宽度 

input
字段：顶部和右侧设置会将图像的右侧和顶部边框移动到（居中）输入的中心（实际上是容器的中心，但是在本例中是相同的），
transform: translate(215px, -50%);
会将其垂直向后移动自身高度的 50%，从而将其在输入中垂直居中，并向右移动 215px（= 略小于输入宽度的一半） ）如果有输入，则将其移向右端，但在字段中内。

body {
  margin: 0;
}

#container {
  background-color: #1F2937;
  width: 650px;
  height: 475px;
  margin: 0 auto;
  margin-top: 100px;
  border-radius: 12px;
}

#main-flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  margin-left: -40px;
  padding-top: 30px;
  font-size: 48px;
  font-family: Karla;
  font-weight: 700;
  color: #ffffff;
}

span {
  color: #4ADF86;
}

h2 {
  margin-top: -20px;
  margin-bottom: 40px;
  font-size: 24px;
  color: #ffffff;
  font-family: Inter;
  font-weight: 400;
}

#input-flex-container {
  display: flex;
  justify-content: center;
  position: relative;
}

input {
  width: 440px;
  height: 35px;
  border: none;
  border-radius: 6px;
}

input:focus {
  outline: none;
}

#input-flex-container img {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(215px, -50%);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
  <title>Home</title>
</head>

<body>
  <section id="container">
    <div id="main-flex-container">
      <h1>Generate a <br><span>random password</span></h1>
      <h2>Never use an insecure password again.</h2>
    </div>
    <div id="input-flex-container">
      <input type="text" id="password" readonly>
      <img src="clipboard.png">
    </div>

  </section>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.