2017-07-26 100 views
0

启动X像素所以,我有一个input框,它拥抱左侧很多,因为我选择的字体和尺寸自定义等。但是,当你键入一些文字时,由于这个原因,它看起来很痒。我只希望能有某种事情可以改变,以改变文本框中实际开始的文字的多少(除了left,centerright)。在输入框中有文本通过

看到我的代码如下。请注意,当您在文本框中输入时,它会稍微拥抱左侧,看起来很糟糕。

.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我不为你的意见作为关心它是否真的很好看,我只是想办法解决。

+0

添加一些填充到您的.editorTextBox类例如; padding-left:10px; – KKK

回答

0

您可以添加填充。在20px的输入框右边添加了左边的&;

.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; 
 
}
<!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>