CODEWITHSUNDEEP
htmlcss
user5907771
user5907771

Reputation:

How can I change the colour of only bottom border of text-box with multicolor in html/css?

I am having a text box and I can set the border colour. I want to change only the bottom colour of the text box. Not only that, the bottom should be multi coloured. Like the image:TextBox

How can I achieve this? Please help

Upvotes: 0

Views: 202

Answers (3)

Sagar Kodte
Sagar Kodte

Reputation: 3815

This is alternate solution for it.

* {
  margin: 0;
  padding: 0;
}

.sg-container
{
width:500px;
height:300px;
margin:200px auto;
border:1px solid #dcdcdc;
position:relative;
  
}



.sg-multicolor {
list-style:none;
width:100%;
font-size:0;
padding:0px;
position:absolute;
bottom:0px;
}

.sg-multicolor li {
display:inline-block;
width:33.3%;
height:5px;
  
}

.sg-multicolor li:nth-child(1) {
background:#F05757;
}

.sg-multicolor li:nth-child(2) {
background:#FAD46B;
}

.sg-multicolor li:nth-child(3) {
background:#08B5CC;
}
<div class='sg-container'>
<ul class='sg-multicolor'>
<li></li>
<li></li>
<li></li>


</ul>

</div>

Upvotes: 0

Saika
Saika

Reputation: 396

div:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 5px;
  background-image: -webkit-linear-gradient(to right, #ee585b 0%,    #ee585b 33%, #f8d270 33%, #f8d270 66%, #20b5ca 66%, #20b5ca 100%);
  background-image: -o-linear-gradient(to right, #ee585b 0%,    #ee585b 33%, #f8d270 33%, #f8d270 66%, #20b5ca 66%, #20b5ca 100%);
  background-image: -moz-linear-gradient(to right, #ee585b 0%,    #ee585b 33%, #f8d270 33%, #f8d270 66%, #20b5ca 66%, #20b5ca 100%);
  background-image: linear-gradient(to right, #ee585b 0%,    #ee585b 33%, #f8d270 33%, #f8d270 66%, #20b5ca 66%, #20b5ca 100%);
  bottom: 0;
}
<div></div>

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

You can use CSS Gradients along with CSS Positioning to simulate such effect. For example :-

* {
  margin: 0;
  padding: 0;
}

textarea {
  resize: none;
  height: 100px;
  width: 400px;
  border: 1px solid #ddd;
}

div {
  margin: 40px;
  position: relative;
  display: inline-block;
  border-radius: 4px;
  overflow: hidden;
}

div:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #ee585b 0%,#ee585b 33%,#ee585b 33%,#f8d270 33%,#f8d270 66%,#f8d270 66%,#20b5ca 66%,#20b5ca 100%);
  bottom: 0;
}
<div><textarea></textarea></div>

Here, am doing nothing but using an :after pseudo element and setting a gradient to that. Rest, am using positioning to set it to the bottom and than I use overflow: hidden; on the wrapper to make sure that it gets that border-radius effect and is not pointy on the edges.

There are other ways to do this, by setting :before or :after pseudo along with another stray element and setting background for all the three but that's not optimal at all imo.

Note: Make sure you use class or an id in your HTML for this particular textarea and change my CSS selectors accordingly. Am using basic tag level selectors just for the demonstration purpose.

Upvotes: 8

Related Questions