Question

所以，我有一个input框，由于我选择的字体和大小定制等原因，它很多地拥抱左侧。但是，当您输入某些文本时，由于这个原因，它看起来很蹩脚。我想要的是让某些东西我可以改变以改变文本框中文本实际开始的距离（left，center和right除外）。

请参阅下面的代码。请注意，当您在文本框中键入内容时，它会稍微抬起左侧并看起来很糟糕。

.signatureInformationSign {
  color: #266AC3;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 400;
  font-size: 50px;
}
.editorTextInfo {
  color: #016F47;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-size: 50px;
  margin-top: 35px;
}
.editorTextBox {
  font-family: 'Hind', sans-serif;
  margin-top: 80px;
  font-size: 30px;
  height: 48px;
  width: 260px;
  border: 3px solid darkGray;
  border-radius: 18px;
}
.editorTextBox:focus {
  outline: 0;
}
input[type = "radio"]:after {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  top: -12px;
  right: 6px;
  margin-right: 50px;
  background-color: darkGray;
  content: "";
  position: relative;
  display: inline-block;
}
input[type = "radio"]:hover {
  cursor: pointer;
}
input[type = "radio"]:checked:after {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: orange;
  top: -12px;
  right: 6px;
  content: "";
  position: relative;
  display: inline-block;
}
.editorPhoneBox {
  font-family: 'Hind', sans-serif;
  margin-bottom: 20px;
  font-size: 16px;
  height: 22px;
  width: 28px;
  border: 2px solid darkGray;
  border-radius: 6px;
}
.editorPhoneBoxOther {
  font-family: 'Hind', sans-serif;
  margin-bottom: 20px;
  font-size: 16px;
  height: 22px;
  width: 38px;
  border: 2px solid darkGray;
  border-radius: 6px;
}
.editorPhoneBox:focus, .editorPhoneBoxOther:focus {
  outline: 0;
}
#plusButton {
  color: gray;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 32px;
  margin-top: -15px;
}
#plusButton:hover {
  cursor: pointer;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Hind|Source+Sans+Pro|Titillium+Web" rel="stylesheet">
  </head>
  <body>
    <div id = "question1">
      <center><div class = "signatureInformationSign">Signature Information Sign</div></center>
      <center><div class = "editorTextInfo">Name</div></center>
      <center><input type = "text" class = "editorTextBox"></center>
    </div>
  </body>
</html>

P.S我不关心你的意见，看它是否真的好看，我只想要一个解决方案。

Answer 1

您可以添加填充。添加左和右20px;

的输入框右侧

＆＃13;

.signatureInformationSign {
  color: #266AC3;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 400;
  font-size: 50px;
}
.editorTextInfo {
  color: #016F47;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-size: 50px;
  margin-top: 35px;
}
.editorTextBox {
  font-family: 'Hind', sans-serif;
  margin-top: 80px;
  font-size: 30px;
  height: 48px;
  width: 260px;
  border: 3px solid darkGray;
  border-radius: 18px;
  padding-left: 20px;
  padding-right: 20px;
}
.editorTextBox:focus {
  outline: 0;
}
input[type = "radio"]:after {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  top: -12px;
  right: 6px;
  margin-right: 50px;
  background-color: darkGray;
  content: "";
  position: relative;
  display: inline-block;
}
input[type = "radio"]:hover {
  cursor: pointer;
}
input[type = "radio"]:checked:after {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: orange;
  top: -12px;
  right: 6px;
  content: "";
  position: relative;
  display: inline-block;
}
.editorPhoneBox {
  font-family: 'Hind', sans-serif;
  margin-bottom: 20px;
  font-size: 16px;
  height: 22px;
  width: 28px;
  border: 2px solid darkGray;
  border-radius: 6px;
}
.editorPhoneBoxOther {
  font-family: 'Hind', sans-serif;
  margin-bottom: 20px;
  font-size: 16px;
  height: 22px;
  width: 38px;
  border: 2px solid darkGray;
  border-radius: 6px;
}
.editorPhoneBox:focus, .editorPhoneBoxOther:focus {
  outline: 0;
}
#plusButton {
  color: gray;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 32px;
  margin-top: -15px;
}
#plusButton:hover {
  cursor: pointer;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Hind|Source+Sans+Pro|Titillium+Web" rel="stylesheet">
  </head>
  <body>
    <div id = "question1">
      <center><div class = "signatureInformationSign">Signature Information Sign</div></center>
      <center><div class = "editorTextInfo">Name</div></center>
      <center><input type = "text" class = "editorTextBox"></center>
    </div>
  </body>
</html>

＆＃13;

在输入框中有文本开始X像素

1 个答案: