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;
}
Related
While I know you can't write variables like
root: {
--aic: align-items:center;;
}
Is there anyway to get round this, by combining the various parts seperately? The obvious obstical here is the requirement of the colon inside the variable.
i.e.
root: {
--ai: align-items:;
--center: center;
--aic:
var(--ai)
var(--center);
}
.myclass {var(--aic);}
I would suggest you to switch to SCSS and use a #mixin. Read more about it here.
Here's a live demo.
HTML:
<div id="test">TEST</div>
SCSS:
:root {
--text_color: red;
--background_color: gold;
}
#mixin my_mixin {
color: var(--text_color);
background-color: var(--background_color);
}
#test {
#include my_mixin;
}
Based on my comment on your question, you can use classes to achieve something similar. But you can't use custom properties as CSS properties, only values -- it's the same as saying for example margin: margin: var(--customMargin);;
/* Layout unrelated to answer */
div { border: 1px solid black; color: white }
.varText { background-color: red }
.varPad { background-color: blue }
.varText.varPad { background-color: green }
/* Answer */
:root { --size: 1rem }
.varText { font-size: var(--size) }
.varPad { padding: var(--size) }
<div class="varText">
Size Text only to root variable
</div>
<div class="varText" style="--size: 2rem">
Size Text only to inline variable
</div>
<div class="varPad">
Size Padding only to root variable
</div>
<div class="varPad" style="--size: 2rem">
Size Padding only to inline variable
</div>
<div class="varText varPad">
Size Text and Padding to root variable
</div>
<div class="varText varPad" style="--size: 2rem">
Size Text and Padding to inline variable
</div>
<!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
I am new to SCSS .I am trying to style my place holder text from light to dark grey.
Attached is the html code:
<div class="form-group">
<textarea class="thread-textarea" ng-maxlength="255" maxlength="255" ng-model="newMessage.Content" ng-keyup="keycount($event)"placeholder="If this is an emergency, call 911. Otherwise, type your message here. We try to respond within 24 hours."title="Type your message" spellcheck="true" aria-labelledby="typeYourMessage"></textarea>
<span class="aria-hidden" id="typeYourMessage">Type your message</span>
</div>
Attached is my related scss code.
$darkgrey: #333333;
textarea{
#include placeholder
{
color: $darkgrey;
}
}
I want to change the color of placeholder from grey to dark grey. Any help would be highly appreciated.
/* cross browser way */
textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
textarea::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
textarea:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
textarea:-moz-placeholder { /* Firefox 18- */
color: pink;
}
/* sass whould be like this */
/*
$darkgrey: #333333;
textarea{
&::-webkit-input-placeholder {
color: $darkgrey;
}
&::-moz-placeholder {
color: $darkgrey;
}
&:-ms-input-placeholder {
color: $darkgrey;
}
&:-moz-placeholder {
color: $darkgrey;
}
}
*/
<div class="form-group">
<textarea class="thread-textarea" ng-maxlength="255" maxlength="255" ng-model="newMessage.Content" ng-keyup="keycount($event)" placeholder="If this is an emergency, call 911. Otherwise, type your message here. We try to respond within 24 hours." title="Type your message"
spellcheck="true" aria-labelledby="typeYourMessage"></textarea>
<span class="aria-hidden" id="typeYourMessage">Type your message</span>
</div>
Just take this and apply your sass styles to it.
Sometimes I see two entries for the CSS 'color' attribute active on a single element, even when one has !important. The one without !important is taking precedence though, as it should (I am trying to force the element to color: white). See screenshot:
Thanks!
UPDATE: added html markup
<div class="x-button x-button-back x-layout-box-item x-stretched" id="quit-button" style="width: auto !important;">
<span class="x-badge" style="display: none;"></span>
<span class="x-button-icon x-hidden" id="ext-element-1109"></span>
<span class="x-button-label" style="" id="ext-element-1110">Quit</span>
</div>
.peacekeepers-edition is set on the first element inside the body, #playview is a distant descendent.
Regardless of the specificity of the rule all proprieties from the CSSOM will appear in the inspector rule view. The fact that the "color:#ccffff" is not crossed/underline is just an inspector bug.
BTW, you overqualified your selectors: .preacekeepers-edition #playview will have a specificity of 1|1|0|, that is way more that you should have. Adding !important will make things hard to manage later.
I'm making some assumptions about your markup (because you haven't provided any), but I think it's fairly safe to say that this is your issue.
Assuming your markup is something like this...
<div class="peace-keepers-edition">
<div id="playview">
<button class="x-button-back">
<i class="x-button-icon">icon</i>
</button>
</div>
</div>
Your first selector targets the button element...
.peace-keepers-edition #playview .x-button-back {
color: #FFF !important;
}
but your second selector targets an element that is a descendant of your button...
.peace-keepers-edition #playview .x-button-back .x-button-icon {
color: #ccccff;
}
Your !important rule is irrelevant because your selectors are targeting different elements.
Easy fix; add this line after line 769...
.peace-keepers-edition #playview .x-button-back .x-button-icon {
color: #fff;
}
Broken example...
body {
background: #1a1a1a;
}
button {
padding: 15px;
font-size: 30px;
background: green;
}
.peace-keepers-edition #playview .x-button-back {
color: #FFF !important;
}
.peace-keepers-edition #playview .x-button-back .x-button-icon {
color: #ccccff;
}
<div class="peace-keepers-edition">
<div id="playview">
<button class="x-button-back">
<i class="x-button-icon">icon</i>
</button>
</div>
</div>
Working example...
body {
background: #1a1a1a;
}
button {
padding: 15px;
font-size: 30px;
background: green;
}
.peace-keepers-edition #playview .x-button-back {
color: #FFF !important;
}
.peace-keepers-edition #playview .x-button-back .x-button-icon {
color: #fff;
}
<div class="peace-keepers-edition">
<div id="playview">
<button class="x-button-back">
<i class="x-button-icon">icon</i>
</button>
</div>
</div>
I use anchor as my site navigation.
<div id='nav'>
<a href='#abouts'>
<div class='navitem about'>
about
</div>
</a>
<a href='#workss'>
<div class='navitem works'>
works
</div>
</a>
</div>
The CSS
#nav {
margin-left: 50px;
margin-top: 50px;
text-transform: uppercase;
}
.navitem {
background: #333;
color: white;
width: 230px;
height: 50px;
font-size: 25px;
line-height: 50px;
padding-left: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-top: 10px;
}
.about:hover {
background: #cc00ff;
}
.about:active {
background: #ff00ff;
color: #000;
width: 250px;
}
.works:hover {
background: #0066FF;
}
.works:active {
background: #0099cc;
color: #000;
width: 250px;
}
I'm wondering how to keep the div element style keep in the :active state once after the click until I hit another nav bar item, so how to do it?
Combine JS & CSS :
button{
/* 1st state */
}
button:hover{
/* hover state */
}
button:active{
/* click state */
}
button.active{
/* after click state */
}
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});
The :target-pseudo selector is made for these type of situations: http://reference.sitepoint.com/css/pseudoclass-target
It is supported by all modern browsers. To get some IE versions to understand it you can use something like Selectivizr
Here is a tab example with :target-pseudo selector.
I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
To make button change content:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
Hope it helps!!
You can use a little bit of Javascript to add and remove CSS classes of your navitems. For starters, create a CSS class that you're going to apply to the active element, name it ie: ".activeItem". Then, put a javascript function to each of your navigation buttons' onclick event which is going to add "activeItem" class to the one activated, and remove from the others...
It should look something like this: (untested!)
/*In your stylesheet*/
.activeItem{
background-color:#999; /*make some difference for the active item here */
}
/*In your javascript*/
var prevItem = null;
function activateItem(t){
if(prevItem != null){
prevItem.className = prevItem.className.replace(/{\b}?activeItem/, "");
}
t.className += " activeItem";
prevItem = t;
}
<!-- And then your markup -->
<div id='nav'>
<a href='#abouts' onClick="activateItem(this)">
<div class='navitem about'>
about
</div>
</a>
<a href='#workss' onClick="activateItem(this)">
<div class='navitem works'>
works
</div>
</a>
</div>
If you want to keep your links to look like they are :active class, you should define :visited class same as :active so if you have a links in .example then you do something like this:
a.example:active, a.example:visited {
/* Put your active state style code here */ }
The Link visited Pseudo Class is used to select visited links as says the name.