How to make the placeholder align to the left

Question

How to make the placeholder align to the left

Navigation

#1 by (3 votes)
#2 by (3 votes)

1

I want to align to the left because it is very far to the right

<div class="login.page">
  <div class="widget-shadow">
    <div class="login-body">
      <form action="thanks.html" onsubmit="validarformulario()">
        <span id="emailOK"></span>
        <div id="campo1"><input 
             type="text" class="textbox" size="30"  placeholder="Name" required>    </div>
        <div id="campo2"><input 
             type="text" id="email" name="email" class="textbox" 
             data-validation="email" size="30"  placeholder="Email " required></div>
        <div id="campo3"><input 
             type="text"  class="textbox" size="30" placeholder="Company" required>  </div>
        <input type="submit"  id="user" size="30"  value="GET EARLY ACCESS">
      </form>
    </div>
  </div>
</div>

html5 css3

asked by alo Malbarez 23.08.2017 в 17:06

source

2 answers

Sql - How to prevent the empty fields of my form from appearing as undefined when doing the query? Error inserting a datetime with PDO

score 3 · Answer 1

.textbox {
    border: 1px solid #DBE1EB;
    font-size: 18px;
    font-family: "hurmegeometricsans3_regularRg";
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 20px;
    background: #E4E4E4;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Angular Bootstrap Switch Demo</title>

  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



</head>

<body>
  
  <div class="widget-shadow">
    <div class="login-body">
        <form action="thanks.html" onsubmit="validarformulario()">
          <span id="emailOK"></span>
          <div id="campo1">
            <input type="text" class="textbox" size="30" placeholder="Name" required> 
          </div>
          <div id="campo2">
            <input type="text" id="email" name="email" class="textbox" data-validation="email" size="30" placeholder="Email" required>
          </div>
          <div id="campo3">
            <input type="text" class="textbox" size="30" placeholder="Company" required>
          </div>
          <input type="submit" id="user" size="30" value="GET EARLY ACCESS">
        </form>
    </div>
  </div>
</body>

</html>

The placeholder has an input, this input has a class called textbox to which you are placing a padding-left: 80px; which generates a space to the left, if you want to have it a little more to the left you have to go down to padding-left see the example below.

score 3 · Answer 2

In the class .textbox you have padding-left: 80px; , you can change the property to padding-left: 40px; , for example, to reduce it.

.textbox {
  border: 1px solid #DBE1EB;
  font-size: 18px;
  font-family: "hurmegometrcsans3_regularRg";
  padding-left: 40px;
  padding-right: 80px;
  padding-top: 8px;
  padding-bottom: 20px;
  background: #E4E4E4;
  color: #2E3133;
}

<div class="widget-shadow">
  <div class="login-body">
    <form action="thanks.html">
      <span id="emailOK"></span>
      <div id="campo1"><input 
         type="text" class="textbox" size="30" placeholder="Name" required></div>
      <div id="campo2"><input 
         type="text" id="email" name="email" class="textbox" 
         data-validation="email" size="30" placeholder="Email " required></div>
      <div id="campo3"><input 
         type="text" class="textbox" size="30" placeholder="Company" required></div>
      <input type="submit" id="user" size="30" value="GET EARLY ACCESS">
    </form>
  </div>
</div>

This will change the style for all the elements that this class has, if you want it to only affect these textbox just add a new more detailed class to get to the elements of interest.

For example, class login-body of div parent of form :

 .login-body .textbox {
    padding-left: 40px;
 }

and so the elements (textbox, etc.) that are children of the class login-body will have this style.

.textbox {
  border: 1px solid #DBE1EB;
  font-size: 18px;
  font-family: "hurmegometrcsans3_regularRg";
  padding-left: 80px;
  padding-right: 80px;
  padding-top: 8px;
  padding-bottom: 20px;
  background: #E4E4E4;
  color: #2E3133;
}

.login-body .textbox {
  padding-left: 40px;
}

<div class="widget-shadow">
  <div class="login-body">
    <form action="thanks.html">
      <span id="emailOK"></span>
      <div id="campo1"><input 
        type="text" class="textbox" size="30" placeholder="Name" required></div>
      <div id="campo2"><input 
        type="text" id="email" name="email" class="textbox" 
        data-validation="email" size="30" placeholder="Email " required></div>
      <div id="campo3"><input 
        type="text" class="textbox" size="30" placeholder="Company" required></div>
      <input type="submit" id="user" size="30" value="GET EARLY ACCESS">
    </form>
  </div>
</div>