<!DOCTYPE html>
<html>
<head>
<style>
span {
color: red;
}
</style>
</head>
<body>
<textarea readonly cols=200 rows=40>
<span>
hahahahaha
</span>
</textarea>
</body>
</html>
in this example，is there anyway I can make the text in <span> to be red in color
or can it be done by some other html tag like <textarea>?
No, you can't put an HTML element inside of a form field tag like textarea or input. You can, however, make the color in a textarea red using normal CSS.
textarea {
color: red;
}
<textarea>text</textarea>
An alternative method you can also use is to adjust the styles of the placeholder attribute.
link to jsfiddle
Hope this helps.
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
Who are you?<br />
<textarea readonly rows="4" cols="50" placeholder="Describe yourself here..."></textarea><br />
<input type="text" placeholder="red" />
OK, now I konw I can't insert into
and i have got another way
<style type="text/css">
.testDiv{
bottom: 36px;
height: calc(100vh - 280px);
resize: none;
overFlow-x:scroll;
overFlow-y:scroll;
}
.keyword{
color:red;
}
</style>
<div class='testDiv' id="keyword">
one<br>
two<br>
three<br>
<span class="keyword">four</span><br>
</div>
just add scroll,height css in div
Related
I am trying to style element plus' el-radio-button in a el-radio-group to have different colours. It is not available by the el-radio-button properties, so I'm trying to target the rendered html elements. When I inspect my webpage, something like the following is shown:
<label class="el-radio-button" role="radio" aria-checked="false" aria-disabled="false" tabindex="-1" data-v-bf51d4b2="" style="color: red;">
<input class="el-radio-button__original-radio" type="radio" name="" tabindex="-1" value="Karthus">
<span class="el-radio-button__inner">Karthus</span>
</label>
The styles are applied on label.el-radio-button and span.el-radio-button__inner but I can't seem to target them using the following styles in my sfc:
<style lang="scss" scoped>
.el-radio-button {
color: red;
padding: 20em;
.el-radio-button__inner {
color: blue;
&:hover {
color: red;
}
}
}
</style>
None of these are applying. I can't really tell whether it's because of specificity, or just overrides, etc. !important on the color properties also don't seem to apply. Is there a way to properly target the rendered html elements in the sfc style?
Use more specific css selectors and it should work
<style>
.el-radio-group .el-radio-button {
color: red;
padding: 20em;
}
.el-radio-group .el-radio-button__inner {
color: blue;
}
.el-radio-group .el-radio-button__inner:hover {
color: red;
}
</style>
example
Is there a way to use CSS to update input fields without changing HTML code?
I have a form like this:
// HTML
<div id="LoginFormContainer">
<div class="formInputLine">
<div class="inputContainer">
<input name="txtUserID$Textbox1" type="text" maxlength="15" id="txtUserID_Textbox1" placeholder="Username" title="Username">
</div>
</div>
<div class="formInputLine">
<div class="inputContainer">
<input name="txtPassword$Textbox1" type="password" maxlength="15" id="txtPassword_Textbox1" placeholder="Password" title="Password">
</div>
</div>
<div class="formInputLine">
<input type="submit" name="btnLogin" value="Login" id="btnLogin"><input name="builderID" type="hidden" id="builderID" value="abc">
</div>
</div>
//CSS
#FormLoginPage #LoginFormContainer .formInputLine .inputContainer input {
text-transform: uppercase!important;
}
#FormLoginPage #LoginFormContainer .formInputLine .inputContainer input {
border: none;
font-size: 12px;
width: 100%;
color: #333;
outline: 0;
-webkit-appearance: caret;
}
// TRYING CSS - able to use this code to add a label but it applies to all input. Not sure how to target only the individual class with a specific id within it.
.formInputLine::before {
content: "Username";
}
And would like to change it to the following using only CSS:
Please note that the above code is actually part of this code I got from a 3rd party. So I am not sure if I can control it via the iframe tag.
Thanks for the help, I greatly appreciate it.
If the input fields have wrapper elements you can use pseudo elements (before or after) on that wrapper to create what you want with pure css, otherwise you'll have to use javascript to manipulate the html structure / add elements etc.
So, for an example, if we have the following HTML structure:
<div class="input-wrapper">
<input type="text" placeholder="some text">
</div>
We can do the following in CSS:
.input-wrapper {
position: relative;
}
.input-wrapper:before {
position: absolute;
left: 0;
bottom: calc( 100% + 10px );
content: "some text";
}
::-webkit-input-placeholder {
color: transparent !important;
}
(This one is used if we have a placeholder and we want to hide it. On production should also use the -moz- and -ms- prefixes).
You could have something like this:
I've included my own font, due to lack of context.
body {font-family: "Droid Sans"}
.Input-Element {padding: .3em;margin: .5em 0}
.Input-Element label {display: block;text-transform: uppercase;padding: .2em 0;font-size: .8em}
.Input-Element input {border:1px solid rgba(0, 0, 0, 0.34);padding:.5em;outline:none;transition: border .25s}
.Input-Element input:focus {border-color: rgba(0, 0, 0, 0.73)}
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<div class='Input-Element'>
<label>Username</label>
<input name='user'>
</div>
<div class='Input-Element'>
<label>Password</label>
<input name='psw'>
</div>
Note: Click Run Code Snippet to see the form!
I was playing with the ideas provided by a few solutions here. After some researching on my own with :nth-child, here is the solution I have for my question. I am sure there is an other way to do the CSS selection. But this is what I have for now.
Using the CSS below can target the two fields individually and add the specific labels
/* add labels */
.formInputLine:nth-child(1)::before {
content: "Username";
}
.formInputLine:nth-child(2)::before {
content: "Password";
}
/* remove place holder */
::-webkit-input-placeholder {
color: transparent;
}
:-moz-placeholder {
/* Firefox 18- */
color: transparent;
}
::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
}
:-ms-input-placeholder {
color: transparent;
}
You can use some jquery and css
$("input").wrap("<div class='custom-input'></div>");
$('.custom-input').eq(0).before("<label>USER NAME</label>");
$('.custom-input').eq(1).before("<label>PASSWORD</label>");
::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" valu "USER NAME" placeholder="USER NAME"><br>
<input type="passsword" placeholder="PASSWORD">
I'm struggling with a fairly trivial problem I assume, never having had prior experience with CSS. How do I change the placeholder text color of something like this?
<div class="square">
<input class="circle" placeholder="blue" />
</div>
I thought something like this might work, but it didn't
.square{
.circle::-webkit-input-placeholder {
color: blue;
}
}
Also, I would like to know how to accomplish the same if its nested further down the hierarchy. Would it be possible to skip elements in between the target placeholder and the outer element?
To target the .circle element inside a .square element, you want to write :
.square .circle::-webkit-input-placeholder {
Change your syntax to the code below:
.square .circle::-webkit-input-placeholder {
color: blue;
}
<div class="square">
<input class="circle" placeholder="blue" />
</div>
It seems like you've used a SASS syntax.
Hope this helps!
Try this..and check this
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
<html>
<head>
<style>
input[type='text'], select {
background: blue
}
.error {
background: red
}
</style>
</head>
<body>
<input type="text" class="error"/>
<select class="error">
<option>non-sense</option>
</select>
</body>
</html>
If the class .error has background red than it must be red. Even if input[type="text"] has a blue background. Tested in IE and GC.
The reason for the problem you're seeing, is that input[type=text] is more specific than .error, so it will override it. Use a more specific selector:
input.error
Or if you want to really be safe:
input[type=text].error
More information about CSS specificity, and how it's calculated
Another approach would be to keep the current selector, but add the !important keyword on the rule:
.error { background: red !important; }
That would instantly make it override any other rules matched for the element. Beware, it's a very powerful tool, and may lead to unexpected results in the future.
Use .error { background: red !important }
Be aware of the limitations this has, please see: !important rules (CSS 2.1 Section 6.4.2)
Try this
<html>
<head>
<style>
input[type='text'], select { background: blue }
.error { background: red; }
input.error { background: red; }
</style>
</head>
<body>
<input type="text" class="error" />
<select class="error">
<option>non-sense</option>
</select>
</body>
</html>
I have a div set transparent with rgba and want on that div an input field which also has a transparent background. The problem is that the input field background is not rendered transparent.
It works if I use opacity:0.8; on the div but than also the text is transparent, so I need rgba.
For the second input field which is outside of the transparent div rgba works.
Here my example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Insert title here</title>
<style type="text/css">
.term {
background-color: rgba(0,0,0,0.8);
color: #5fba3d;
width: 200px;
height: 100px;
}
input {
background-color: rgba(0,0,0,0.8);
color: #FFF;
border: none;
}
</style>
</head>
<body>
<div style="background-color:yellow; width:300px;">
<div class="term">
Input 1 <input type="text" value="Test" />
</div>
<br />
<input type="text" value="Input 2" />
</div>
</body>
</html>
Any ideas?
Thanks!
Nathanael
Hey Nathaneal its working fine if i chang the rgba value so text is not going to transparent
input {
background-color: rgba(0,0,0,0.1);
color: red;
border: none;
}
i hope this will help you...
you can see the demo :-
http://jsbin.com/avupaw/16/edit#html,live
Or just
input {
background: none;
color: red;
border: none;
}