CODEWITHSUNDEEP
htmlcss
noblerare
noblerare

Reputation: 11873

Style HTML input element to decrease type-able width without affecting actual width

I am trying to achieve something like the image below where I have a password field with a custom show/hide password eye icon. The problem that I am running into is that if a user enters a long password, the password dots overflow into the eye icon.

enter image description here

Is there a way to shrink the type-able width of the password field without touching the actual width of the field at all? Because I'm trying to make this responsive, I'd like to set the typeable width to be some sort of percentage.

I'm able to achieve the behavior I want directly in Chrome dev tools because I see something like:

<input type="password" ....>
    #shadow-root (user-agent)
        <div pseudo="-webkit-input-placeholder" id="placeholder" style="display: block !important;">Password</div>
        <div id="text-field-container" pseudo="-internal-password-container">
            <div id="editing-view-port">
                <div></div>
            </div>
            <div pseudo="-ms-reveal" id="password-reveal" style="display: none;"></div
        </div>
</input>

and if I add a style to the #text-field-container div, with a width: 85%. It achieves my goal. However, I don't know how to do this in my CSS/LESS files no matter what I try.

As a clarification: I don't have access to the shadow DOM elements as it is part of the native HTML input tag.

Upvotes: 0

Views: 228

Answers (2)

noblerare
noblerare

Reputation: 11873

This was a dumb question on my part but StackOverflow discouraged me from deleting a question that had an answer. The fix that I ultimately went with was incredibly simple and did not require any shadow DOM manipulation.

The magical style was simply to add a padding-right to the input element thereby shrinking the type-able area.

Upvotes: 1

Adamszsz
Adamszsz

Reputation: 581

You need to do something like this only in HTML and it should works as you said:

<input type="password" ....>
    #shadow-root (user-agent)
        <div pseudo="-webkit-input-placeholder" id="placeholder" style="display: block !important;">Password</div>
        <div style="width: 85%;" id="text-field-container" pseudo="-internal-password-container">
            <div id="editing-view-port">
                <div></div>
            </div>
            <div pseudo="-ms-reveal" id="password-reveal" style="display: none;"></div
        </div>
</input>

also you can try like this in css file :

#text-field-container {
 width: 85% !important;
}

Upvotes: 0

Related Questions