CODEWITHSUNDEEP
htmlcss
Vahe
Vahe

Reputation: 1841

HTML/CSS - How to display background image (icon) with some clearance to the right of the icon?

The following css is for styling an input textbox with a icon on invalid inputs.

How can I get the icon to appear with some padding/margin immediately to the right of the icon when the icon appears?

Right now, the icon is touching the right boundary of my text input.

What modifications do I need to do to make this work?

.error{
  outline: solid 1px red !important;
  background: url('./resources/icons/[email protected]') no-repeat scroll right !important;
  background-attachment: fixed;
  order-right: 10px solid transparent !important;
  position: relative;
  background-color: #eeeeee !important;
  background-size: 15px 15px !important;
  padding-left: 20px !important;
  padding-right: 18px !important;
  border-radius: 0px;
  transition: border-color 0s ease-in-out 0s, box-shadow 0s ease-in-out 0s;
}

Upvotes: 0

Views: 645

Answers (1)

terraelise
terraelise

Reputation: 3199

You should remove the background-attachment: fixed and change to something like background-position: right 10px center;

Upvotes: 1

Related Questions