border not working properly when applying padding-CodePudding

I was applying a border to this input field along with a gradient:

(https://i.stack.imgur.com/eTqQP.png)

,however because i applied some padding now it is very thick on the left side of the border when i hover the input

Here is the css code:

#input2:hover {
    border:2px double transparent;
    border-radius: 5px;
    background-image: linear-gradient(white,white),
    linear-gradient(45deg, #63589A,#5e138d);
    background-origin: border-box;
    background-clip: content-box,border-box;
    cursor: pointer;
}
input {
    padding-left: 5px;
    border-radius: 5px;
    border-color: rgba(237, 237, 237, 255);
}

I want the left- side to look the same as the other border-sides.

Would appreciate it if someone helped me on this!

CodePudding user response：

Use padding-box inside the background-clip instead of content-box

input {
  border: 3px solid transparent;
  border-radius: 5px;
  background-image: 
    linear-gradient(white, white), 
    linear-gradient(45deg, #63589A, #5e138d);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  cursor: pointer;
  padding: 5px 30px;
  font-size: 20px;
  outline-offset: 4px;
}

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

CodePudding user response：

Is this what you were trying to achieve?

#input2 {
  padding-left: 5px;
  cursor: pointer;
  font-family: monospace;
  width: 200px;
  height: 30px;
}

.input-container {
  display: flex;
  border-radius: 5px;
  width: max-content;
  border-color: rgba(237, 237, 237, 255);
  padding: 2px;
}

.input-container:hover {
  border: none;
  background-image: linear-gradient(white, white), linear-gradient(45deg, #63589A, #5e138d);
  background-origin: border-box;
  background-clip: content-box,border-box;
}

<div >
  <input id="input2" type="text" placeholder="e.g. 1234 5678 9123 0000"/>
</div>