CODEWITHSUNDEEP
htmlcss
Han Han
Han Han

Reputation: 428

Border-color in input tag will not work when the text is editing(CSS3)

I want to make a blue-style CSS framework. I was dealing with input tag now and I want to use Border-color in it. However, when I was editing the text, it will turn into black instead of this color.
Here is my code:
CSS:

input[class*=bright][type=text]::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: rgb(150,230,255);
}
input[class*=bright][type=text]::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: rgb(235,255,255);
    opacity: 1;
}
input[class*=bright][type=text] {
  color:rgb(50,200,255);
  background:rgb(235,255,255);
  border-style:solid;
  border-color:rgb(50,200,255);
  border-radius:5px;
}

HTML: 
<input class="bright" type="text" placeholder="test">

The border will be black when I tested it on Edge and Chrome and they both show the black border.
I also tried this but it did not work neither: 
input[class*=bright][type=text]:active{
  border-color:rgb(50,200,255);
}

I wonder if there is a solution to make it work when editing, or changing it into a different bonder color when editing the text.
I want a CSS3-only solution in that this is only a framework by CSS3.

Upvotes: 1

Views: 58

Answers (1)

Nikhil Sawant
Nikhil Sawant

Reputation: 402

Try this and see if this suits your requirements:

input[class*=bright][type=text]::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: rgb(150, 230, 255);
}

input[class*=bright][type=text]::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: rgb(235, 255, 255);
  opacity: 1;
}

input[class*=bright][type=text] {
  color: rgb(50, 200, 255);
  background: rgb(235, 255, 255);
  border-style: solid;
  border-color: rgb(50, 200, 255);
  border-radius: 5px;
}

input[class*=bright][type=text]:focus {
  outline: none !important;
  border-color: rgb(50, 200, 255);
}
<input class="bright" type="text" placeholder="test">

Upvotes: 1

Related Questions