Solution 1 :

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 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.