How do I style a some parts of a tag in a certain and another in another way.
Like.
33% of the input on the left should be red, and the rest should be blue.
How do I do it?
Also for other elements not only this one.
THANKS!
1 Like
Hi @gururajankappa !
You could accomplish that through the use of wrapping the content in divs or span tags.
For example, if you wanted a portion of your text to be blue and the other part to be red then you can wrap that text in span tags with classes named red and blue and change the color in your css.
<p>
<span class="red">I want to be red.</span>
<span class="blue">I want to be blue.</span>
</p>
.red{
color:red;
}
.blue{
color:blue;
}
Hey!
If you want to dynamically render an element, such as a progress bar, where it might not always be 33% or where the string/element might change, you should probably use another language such as JavaScript. Perhaps you can do something with the D3 library (see the Data Visualization course in the Curriculum).
Depending on what sort of element you want to do this with, there might be different solutions.
If it’s a progress bar without text etc., you could perhaps give the element a background color and then create a child element (
) with another background color and then set it’s width using CSS to a percentage?
Oh! It was that easy.
Thanks a lot for the help.
How do I select 33% of the input.
It is really complicated for me 
It is not easy! But I’m sure you can do it 
Is it an input field (text area) in which a user can type something, and 33% of the text will be red? Or do you know the text in advance (static)?
1 Like
Yeah I am also confused about what you mean by input.
So if you can be more specific about what type of input.
Providing an example would help.
Really motivating words.
Okay.
<input type='text'> </input>
But to @AndreasGuldborg 's question,
Do you know the text ahead of time? Because if so then you don’t really need a programming language do that.
I only the background of the input tag needs to be red color.
The background needs to be colored only.
So you want 33% of the background color red and the rest blue?
Yes!
Yes! 20 characters
That is very different than what I originally thought this question was.
I found this stackoverflow answer that should help.
I’m really bad at communicating.
Thanks!
Okay. I had night light turned on, so it was appearing black!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Half certain color and another half another color</title>
<style>
#toRight{
width:400px;
height:350px;
/* To the right, blue of 50% and yellow of 50% */
background: linear-gradient(to right, blue 50%, yellow 50%);
}
#toBottom{
width:400px;
height:350px;
/* To the right, blue of 50% and yellow of 50% */
background: linear-gradient(to bottom, blue 50%, yellow 50%);
}
#toLeft{
width:400px;
height:350px;
/* To the right, blue of 50% and yellow of 50% */
background: linear-gradient(to left, blue 50%, yellow 50%);
}
/* There is no up, only bottom, you don't need up */
#toUp{
width:400px;
height:350px;
/* To the right, blue of 50% and yellow of 50% */
background: linear-gradient(to bottom, blue 50%, yellow 50%);
}
</style>
</head>
<body>
<!-- Uncomment anyone to see the results -->
<!-- <div id='toRight'></div> -->
<!-- <div id='toBottom'></div> -->
<!-- <div id='toLeft'></div> -->
<!-- <div id='toUp'></div> -->
</body>
</html>
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.