Change the background of the input text but not the background of whole input field

user_13162647 0
Viewed 76

Is it possible to change the background of the input text but not the whole input field? I did use the pseudo selector ::firstline to change it, this seems to be working on chrome but not in safari, although i am conditionally using this style in angular application. I want to be able the achieve something similar to the screenshot below. enter image description here

The CSS code looks like this

.tag-text::first-line{
    background:#c8dadf;
    padding: 2px;
}

Angular template is

<input type="text" [ngClass]="{'tag-text': some-condition}" />
angular css html
2 Answers

style;

<style>
    body {
        display: grid;
    }

    .input-wrapper {
        position: relative;
        display: grid;
        grid-template-columns: max-content 1fr max-content;
        grid-column-gap: 8px;
        align-items: center;
        background-color: white;
        justify-self: left;
        height: 40px;
        padding: 0 8px;
        border-radius: 4px;
        border: 1px solid #eee;
    }
    /*you may only need this part*/
    .input {
        border: none;
        /*make it equal to your preferred font size*/
        height: 18px;
        background-color: #C8DADF;
        color: #8A8E8F;
        outline: none;
        font-size: 18px;
        line-height: 18px;
    }

    span {
        width: 24px;
        height: 24px;
        background-color: #000;
        border-radius: 50%;
    }
</style>

HTML:

<div class="input-wrapper">
     <!--   replace this with your search icon-->
     <span></span>
     <input type="text" class="input"/>
     <!--      replace this with your clear icon-->
     <span></span>
</div>

screenshot

user_102391850

I found a question similar to yours.The only thing you need to change is the background-color.

user_122834270
Related