I believe padding-right should do the job for you.
.input {
padding-right: 18px; // width of the icon
// ...
}
Edit: I haven’t noticed the icon has position relative, consider create icon with absolute positon (:after is best for that).
Solution 1 :
Solution 2 :
/* max width with css: */
.input {
width: 100%;
max-width: 50%;
}
/* you can set padding to left or right in input box css, where you are showing icon. */
.input {
padding-left: 20px;
}<!-- begin snippet: js hide: false console: true babel: false -->Problem :
I’m trying to prevent input text to overflow my custom icon:
My code:
<input type="text" class="input" />
<div class="icon" aria-hidden="true" role="button"></div>
.input {
height: 50px;
background: #E9E9E9;
border-radius: 50px;
padding: 10px;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
color: #8C8C8C;
}
.icon {
width: 18px;
height: 12px;
background: transparent url('arrow-down.png') no-repeat;
background-size: contain;
position: relative;
opacity: 0.5;
left: -40px;
bottom: -20px;
cursor: pointer;
}
How can I set a max-width for the text input, not for the input itself? Theres another way to do that?
obs: I cant change this html structure, because it’s part of a framework and I don’t have access to it. I only can make changes on css code.