Why placeholder doesn't show its last element?-CodePudding

Can someone explain why placeholder doesn't show its last element?

Instead of this: "Search Google or type a URL"

It shows this: "Search Google or type a UR".

I tried to delete all css code but it didn't help.

.google-search {
  font-family: 'Arial';
  padding-left: 12px;
  padding-right: 250px;
  padding-top: 6px;
  padding-bottom: 6px;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  border-radius: 20px;
}

<input type="text" placeholder="Search Google or type a URL" >

CodePudding user response：

Use width instead of padding-right

<!DOCTYPE html>
<html>
<head>
  <style>
    .google-search{
      font-family:'Arial';
      padding-left:12px;
      width: 250px;
      padding-top:6px;
      padding-bottom:6px;
      border:none;
      box-shadow:0 1px 4px rgba(0, 0, 0, 0.4);
      border-radius:20px;
    }
  </style>
</head>
<body>
  <input type="text" placeholder="Search Google or type a URL" >
</body>
</html>

CodePudding user response：

While the field looks very wide, that is just due to the 250px of padding on the right hand side.

The placeholder (and any text you might type inside the field or put in a value attribute) gets cut off at the edge of the content width area.

CodePudding user response：

Just give width to the input feild. this will solve your problem.

<!DOCTYPE html>
<html>
<head>
  <style>
    .google-search{
      font-family:'Arial';
      padding-left:12px;
      padding-right:250px;
      padding-top:6px;
      padding-bottom:6px;
      border:none;
      box-shadow:0 1px 4px rgba(0, 0, 0, 0.4);
      border-radius:20px;
      width: 50%
    }
  </style>
</head>
<body>
  <input type="text" placeholder="Search Google or type a URL" >
</body>
</html>