1

so I'm trying to make the input field like this image to see what I want to expect

and for some reason box-sizing:border-box doesn't work

I'm using chrome browser

am I doing something wrong? .....................

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}



#input-el {
    box-sizing: border-box !important;
    width: 100%;
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
    border-style: solid ;
    border-width: 2;
    border-color: #5f9341;
    background-color: rgb(214, 229, 248);
    color: black;
    
}

#input-btn {
    margin: 10px 10px 0px;
    font-size: 20px;
    border-style:solid;
    border-color: #5f9341;;
    background-color: #5f9341;
    color: aliceblue;
}
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css">
    <title>chrome extension</title>
  </head>
  <body>
      <!-- input field for writting inside -->
    <div>
      <input type="text" id="input-el" />
    </div>
    <!-- save button to save the input -->
    <div>
      <button id="input-btn">SAVE INPUT</button>
    </div>
    <script src="index.js"></script>
  </body>
</html>
Yasin Br
  • 1,675
  • 1
  • 6
  • 16

1 Answers1

1

You should be doing this:

width: calc(100% - 20px);
Chong Lip Phang
  • 8,755
  • 5
  • 65
  • 100