Problem with CSS Styling: Classes are intended to have consistent appearance but appear quite distinct

Can someone help me understand why the input fields for my username and password are displaying at different sizes, even though they are styled together in my CSS file? I'm still new to this and just experimenting, but I can't figure out what's causing the discrepancy.

Strange size difference between password and username fields. Please ignore the placeholder image as it's just a placeholder while testing different styles.

*{
  font-family: "lato", sans-serif;
}
body{
  background-color: #59c9fc;
}
.login-div{
  margin: 100px auto;
  width: 350px;
  background-color: #fff
  padding: 60px;
}
.logo{

  background-color:#59c9fc;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto;
  margin-bottom: 10px;

}
.logo img{
  width: 100%;

}
.title, .sub-title{
  text-align: center;
  color: #505050;
  font-size: 35px;
}
.sub-title{
  font-size: 18px;

}

.form{
  width: 100%;
  margin-top: 30px;
}
.form input{
  font-size: 18px;
  padding: 10px 20px 10px 5px;
  border: none;
  outline: none;
  background: none;

}

 .username, .password {
  display: block;
  border-radius: 500px;
  border: 1px solid rgba(0, 0, 0,0.2);
  padding: 10px;
  margin: 10px 0;
  background-color: #fff;

}
.form svg{
  height: 20px;
  margin-bottom: -5px;
  margin-left: 10px;
  margin-right: 5px;
}
.options{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  padding: 5px 0px;
  margin-bottom: 30px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="main.css" class="css">
  <title>Custom Form Styling</title>
</head>

<body>


  <div class="login-div">
    <div class="logo">
      <img src="finger.png" alt="">
    </div>
    <div class="title">Creative Forms</div>
    <div class="sub-title">Make Your Forms Stand Out</div>

    <div class="form">
      <div class="username">
        <svg class="svg-icon" viewBox="0 0 20 20">
          <path
            d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z">
          </path>
        </svg>
        <input type="text" class="text" placeholder="Enter your username or email">
      </div>
      <div class="password">
        <svg class="svg-icon" viewBox="0 0 20 20">
          <path
            d="M17.308,7.564h-1.993c0-2.929-2.385-5.314-5.314-5.314S4.686,4.635,4.686,7.564H2.693c-0.244,0-0.443,0.2-0.443,0.443v9.3c0,0.243,0.199,0.442,0.443,0.442h14.615c0.243,0,0.442-0.199,0.442-0.442v-9.3C17.75,7.764,17.551,7.564,17.308,7.564 M10,3.136c2.442,0,4.43,1.986,4.43,4.428H5.571C5.571,5.122,7.558,3.136,10,3.136 M16.865,16.864H3.136V8.45h13.729V16.864z M10,10.664c-0.854,0-1.55,0.696-1.55,1.551c0,0.699,0.467,1.292,1.107,1.485v0.95c0,0.243,0.2,0.442,0.443,0.442s0.443-0.199,0.443-0.442V13.7c0.64-0.193,1.106-0.786,1.106-1.485C11.55,11.36,10.854,10.664,10,10.664 M10,12.878c-0.366,0-0.664-0.298-0.664-0.663c0-0.366,0.298-0.665,0.664-0.665c0.365,0,0.664,0.299,0.664,0.665C10.664,12.58,10.365,12.878,10,12.878">
          </path>
        </svg>
        <input type="text" class="password" placeholder="Enter your password">
      </div>
      <div class="options">
        <div class="remember-me">
          <input id="remember-me" type="checkbox">
          <label for="remember-me">Remember me?</label>
        </div>
        <div class="forgot-password">
          <a href="#">Forgot Password?</a>
        </div>

      </div>
      <button class="signin-btn">SIGN IN</button>
      <div class="signup">
        <a href="#">New user? Sign up here.</a>
      </div>

    </div>
  </div>
</body>

</html>

htmlcss

Answer №1

Eliminate the password class from the password input.

<input type="text" placeholder="password">


* {
  font-family: "lato", sans-serif;
}

body {
  background-color: #59c9fc;
}

.login-div {
  margin: 100px auto;
  width: 350px;
  background-color: #fff padding: 60px;
}

.logo {
  background-color: #59c9fc;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto;
  margin-bottom: 10px;
}

.logo img {
  width: 100%;
}

.title,
.sub-title {
  text-align: center;
  color: #505050;
  font-size: 35px;
}

.sub-title {
  font-size: 18px;
}

.form {
  width: 100%;
  margin-top: 30px;
}

.form input {
  font-size: 18px;
  padding: 10px 20px 10px 5px;
  border: none;
  outline: none;
  background: none;
}

.username,
.password {
  display: block;
  border-radius: 500px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px;
  margin: 10px 0;
  background-color: #fff;
}

.form svg {
  height: 20px;
  margin-bottom: -5px;
  margin-left: 10px;
  margin-right: 5px;
}

.options {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px 0px;
  margin-bottom: 30px;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet">

<div class="login-div">
  <div class="logo">
    <img src="finger.png" alt="">
  </div>
  <div class="title">Education Community</div>
  <div class="sub-title">K-12 Education Consultants</div>

  <div class="form">
    <div class="username">
      <svg class="svg-icon" viewBox="0 0 20 20">
        <path d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z">
        </path>
      </svg>
      <input type="text" class="text" placeholder="username or email">
    </div>
    <div>
      <input type="text" placeholder="password">
    </div>
    <div class="options">
      <div class="remember-me">
        <input id="remember-me" type="checkbox">
        <label for="remember-me">Remember me?</label>
      </div>
      <div class="forgot-password">
        <a href="#">Forgot Password</a>
      </div>

    </div>
    <button class="signin-btn">LOGIN</button>
    <div class="signup">
      <a href="#">New client? Register here.</a>
    </div>

  </div>
</div>

Codepen: https://codepen.io/manaskhandelwal1/pen/OJRKZEy?editors=1100

   

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Modernizr to determine the presence of nth-child in a test

I'm attempting to utilize modernizr in order to check for browser support of the :nth-child selector, but I am unsure of how to proceed. I came across this particular example on http://jsfiddle.net/laustdeleuran/3rEVe/ which tests for :last-child. How ...

csscss-selectorsmodernizr

Unable to modify the background image of the button

Currently, I am working on this element I am trying to insert a background image into the "Click" button, but I am not seeing any results. Here is the HTML and CSS I am using: .cn-button { position: absolute; top: 100%; left: 50%; z-ind ...

htmlcssbackground

Press the toggle switch button to easily switch between two distinct stylesheets

With a looming exam at university, my web design professor has tasked us with creating a website. The unique challenge is to implement a style change by seamlessly switching between two different CSS stylesheets. My idea is to start with a black and white ...

javascriptcss

Incorporating Ajax comments into an Ajax-powered status feature

I'm currently in the final phase of implementing ajax in my feed. Originally, I thought it would be a simple matter of pasting the comment input, but it turned out to be more complex than I anticipated. I placed the input below the main ajaxed status ...

phpjqueryhtmlajax

Retrieve selected value from HTML input with datalist and use it as an argument in a method

I have a datalist in my HTML input where I need to pass the selected value into JavaScript / Angular. It must be passed because the datalist is being used in an HTML table with multiple entries. Most examples I've come across show how to grab the valu ...

javascripthtmlangularjs

Prevent background image animation in CSS

I've encountered an issue with a simple button I created that uses two background images for normal and hover states. Upon testing in various browsers, I noticed that the images animate on hover, causing them to slide up and down. I tried eliminating ...

csscss-transitions

One way to display a div's inner HTML as its background is to apply a CSS rule

Help needed! <div class="container">red</div> <div class="container">green</div> <div class="container">#eeeeee</div> I am trying to dynamically set background colors for multiple divs based on their inner HTML co ...

javascripthtmlcss

Instructions on creating a Superfish menu with a vertical layout in the first level and a horizontal layout in the second level

Currently, I am using the Superfish menu in Drupal7 and have designed my first item level to be vertical. However, I now want to style my second item level horizontally. I have tried various CSS approaches and added some class names via jQuery like $(&apo ...

javascripthtmlcssmenusuperfish

choosing between different options within Angular reactive forms

I am attempting to create a select element with one option for each item in my classes array. Here is the TypeScript file: @Component({ selector: 'app-create-deck', templateUrl: './create-deck.component.html', styleUrls: [' ...

javascripthtmlangulartypescript

- Customizing the width of each dropdown level in a unique way

Working on a customized menu design that you can view live at: Focusing on the third level menu, I encountered an issue where all menus have the same width due to sharing the dropdown-menu class. While I understand the root cause of the problem, I am unsu ...

jqueryhtmlcsstwitter-bootstrap-3dotnetnuke

css problem with footer in html5

Check out this code snippet for the footer section: <footer> <div class="footer"> <nav> <ul class="nav-list1"> <li><img src="img/notes.png" alt="img"></li> ...

csshtml

Instructions for dividing a screen into two halves, either with a 20/80 or 30/70 split, using HTML

I've set up my HTML structure like this: <div class="row"> <div class="col"> <div class="leftside"> ...content for leftside goes here... </div> </div> <di ...

htmldjangobootstrap-4

Incorporate a dynamic HTML attribute into the ChildComponent

I am looking to include a dynamic HTML property called 'hits' in my ChildComponent within the HTML code: <child-component test={{ variable }}></child.component> I do not intend to use it as an input, but rather just for testing p ...

htmlangulartagshtml-tag-details

Updating the Animation for Datepicker Closure

While using the date picker, I want it to match the width of the input text box. When closing the date picker, I prefer a smooth and single motion. However, after selecting a from and to date, the datepicker no longer closes smoothly. I have attempted sol ...

javascripthtmljquerycss

Is it possible to create interlinked HTML pages from markdown files?

Is it possible to create documentation using multiple .md files that reference each other and then utilize a tool like Dillinger to convert these .md files into separate html pages with interlinking? For instance, can I automatically transition (via Dilli ...

htmlmarkdownmultimarkdown

What are the steps to turn off responsive view in WordPress?

I have a website at . I am attempting to deactivate the mobile view, which is the responsive display of my Wordpress theme. I have tried various methods such as removing the viewport meta tag, using fixed width CSS, and disabling the responsive option i ...

csswordpressresponsive-designbootstrap-4

Tips for inserting a php variable into an html document

I am trying to figure out how to export a variable from a php file into an html file. The php file I'm working with is example.php and it contains the following code: <?php $array= ['one','two']; ?> The html file is named ...

javascriptphphtml

Creating a dynamic row in an HTML table with elements inside

I have an array of numbers in my angular application that I need to display in an HTML table without truncating them and ending with a comma. Each row should display a maximum of 20 values. How can this be achieved? The array looks like this - let arr ...

htmlangular

Creating eight equal sections within HTML <div> elements using Bootstrap

I am brand new to Angular. I need to design something like this: https://i.sstatic.net/Zcb9i.png However, I'm struggling to find the right solution. Here is what I have so far: https://i.sstatic.net/7hsrk.png. Having been a backend developer, I&ap ...

htmlcssangularbootstrap-5

Determine if the browser displays <select multiple> as a modal dialog

Is it possible to use JavaScript to detect whether a specific browser displays a focused <select multiple> element as a popup or strictly as an inline box? On certain platforms, like the Android Browser and iOS Safari, the appearance of a popup can ...

javascripthtmlselectcross-browserbrowser-feature-detection