CODEWITHSUNDEEP
cssinputbox
testing_22
testing_22

Reputation: 2585

How to change previous typed text background color of input box in CSS?

I'm new to CSS and I want to learn how I can change the background color of the text that I've selected using the arrow keys. I'm using Bootstrap 4 to get the style and I want to override it to my own's.

Normal behavior:

1

If I press key down I see something like:

2

But I want it to be another color (such as transparent).

3

I've just tried the code below but without success.

input[type="text"] {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgb(255, 0, 0);
    border-radius:0;
    background-color: transparent;
    margin:1px;
    height: 10px;
    max-width: 3% !important;
    box-sizing: content-box;
    -webkit-box-shadow: none;
    box-shadow: none;
}

input[type="text"]:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    color:sienna !important;
    background-color:transparent !important;
}
<input class="form-control col-md-2" required="" type="text" id="0">

Upvotes: 0

Views: 580

Answers (1)

Luka
Luka

Reputation: 1008

To override the default browser style applied by the Chrome browser, take a look at this article. I've tested this approach with Bootstrap and it works perfectly.

Change Autocomplete Styles in WebKit Browsers

Upvotes: 1

Related Questions