Html Question posted in
Some basic documentation can be found here.

Html – CSS design not affecting the input boxes with div and class

I am trying to make a google web application with input and select elements. I want to align both [input] and [select] elements with same margin and padding. I tried with below written code on my google web application but can’t happen. but if i go with [form input] in CSS then it happens but not with [div] and [class].

<style>
  .heading {
    font-family: "Times New Roman", Times, serif;
    text-align:center;
    font-weight: bold;
    color: black;
    font-size: 180%;
    padding: 20px 20px 15px 20px;
    background-color: #76ff03;
  }

  label {
    font-size: 30px;
  }

  select {
    height: 45px;
    width: 340px;
    font-size: 20px;
    font-family: Arial;
    border-radius: 15px;
  }
  /* input[type=number] {
    height: 40px;
    width: 150px;
    border: none;
    background: transparent;
    border-bottom: 1px solid black;
    outline: none;
    margin-left: 200px;
    padding: 30px;
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
   } */

   
  .inputfield {
    height: 40px;
    width: 150px;
    border: none;
    background: transparent;
    border-bottom: 1px solid black;
    outline: none;
    margin-left: 200px;
    padding: 30px;
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
  }
  
  .Row {
    margin-left: 200px;
    padding: 30px;
  }

  ::placeholder {
    color: Black;
  }
    
</style>
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <base target="_top">
  </head>
  <body>
    <iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
    <form action="submitscript.php" target="dummyframe">

      <div class="heading">
        <label>Sample Monitoring Sheet</label>
      </div>
  
      <div class="Row">
        <select id="Category">
          <option>Hardware</option> 
          <option>Software</option>
          <option>Accessories</option>   
        </select>
      

        <select id="subcategory">
          <option>Processor</option> 
          <option>RAM</option>
          <option>ROM</option>   
        </select>
        

        <select id="shift">
          <option>Hard disk</option> 
          <option>Key board</option>
          <option>Mouse</option>
        </select>
      </div>

    

   
      <div class="row">
        <input id="plan" type="number" class="validate" placeholder="MPlan">
      </div>
         

      
      <div class="row inputfield">
        <input id="per" type="number" class="validate" placeholder="Permanent">
        <input id="tra" type="number" class="validate" placeholder="Trainee">
        <input id="adi" type="number" class="validate" placeholder="Adiraj">
      </div>
     
    

   
      <div class="row inputfield">
        <input id="cad" type="number" class="validate" placeholder="Cadmaxx">  
        <input id="lay" type="number" class="validate" placeholder="Layam">
        <input id="mau" type="number" class="validate" placeholder="Mauli">
      </div>
    

   
      <div class="row">
        <input type="submit" id="btn" value="Submit">
      </div>
    
    </form>  
      
  </body>
</html>
Tags:

2

Answers


  1. 0 
    .heading {
    font-family: "Times New Roman", Times, serif;
    text-align: center;
    font-weight: bold;
    color: black;
    font-size: 180%;
    padding: 20px 20px 15px 20px;
    background-color: #76ff03;
    margin-bottom: 30px;
}

label {
    font-size: 30px;
}

.row {
    margin: 20px 0;
    padding: 10px 200px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

select {
    height: 45px;
    width: 340px;
    font-size: 20px;
    font-family: Arial;
    border-radius: 15px;
    padding: 0 10px;
}

input[type="number"] {
    height: 40px;
    width: 150px;
    border: none;
    background: transparent;
    border-bottom: 1px solid black;
    outline: none;
    padding: 5px;
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
}

input[type="submit"] {
    padding: 10px 20px;
    font-size: 18px;
    background-color: #76ff03;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 20px auto;
    display: block;
}

input[type="submit"]:hover {
    background-color: #64dd17;
}

::placeholder {
    color: Black;
}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <base target="_top">
  </head>
  <body>
    <iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
    <form action="submitscript.php" target="dummyframe">
      <div class="heading">
        <label>Sample Monitoring Sheet</label>
      </div>
  
      <div class="row">
        <select id="Category">
          <option>Hardware</option> 
          <option>Software</option>
          <option>Accessories</option>   
        </select>
      
        <select id="subcategory">
          <option>Processor</option> 
          <option>RAM</option>
          <option>ROM</option>   
        </select>
        
        <select id="shift">
          <option>Hard disk</option> 
          <option>Key board</option>
          <option>Mouse</option>
        </select>
      </div>
    
      <div class="row">
        <input id="plan" type="number" class="validate" placeholder="MPlan">
      </div>
         
      <div class="row">
        <input id="per" type="number" class="validate" placeholder="Permanent">
        <input id="tra" type="number" class="validate" placeholder="Trainee">
        <input id="adi" type="number" class="validate" placeholder="Adiraj">
      </div>
     
      <div class="row">
        <input id="cad" type="number" class="validate" placeholder="Cadmaxx">  
        <input id="lay" type="number" class="validate" placeholder="Layam">
        <input id="mau" type="number" class="validate" placeholder="Mauli">
      </div>
    
      <div class="row">
        <input type="submit" id="btn" value="Submit">
      </div>
    </form>  
  </body>
</html>
    Login or Signup to reply.
  2. 0

    Your issue is caused by the way you’re targeting the elements in CSS. The .inputfield class you defined applies to <div> elements, not directly to the <input> elements. However, when you use input[type=number] or .validate, you’re directly targeting the <input> elements.

    To align your input and select elements with the same margin and padding, you should directly target the input elements in your CSS. You could do that by using the .validate class or the input[type="number"] selector (like you were already doing):

    .validate {
    height: 40px;
    width: 150px;
    border: none;
    background: transparent;
    border-bottom: 1px solid black;
    outline: none;
    margin-left: 200px;
    padding: 30px;
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
  }

    Alternatively, if you want to make the input fields inside the .inputfield divs have similar styling to the select elements, you can use the following CSS:

    .inputfield input[type="number"] {
    height: 40px;
    width: 150px;
    border: none;
    background: transparent;
    border-bottom: 1px solid black;
    outline: none;
    margin-left: 200px;
    padding: 30px;
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search