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.
Related
I create a dark/light theme switcher and the problem that I discover is when I enter any information in input field while the website in dark mode, the text inside input field appears black, how I can change it to keep black text colour on light mode and white text colour on dark mode.
Here is my CSS for light/dark mode. How I can add a different text color for dark mode?
:root {
--primary-color: rgb(82, 80, 144);
--secondary-color: #536390;
--font-color: #424242;
--bg-color: #fff;
--heading-color: #292922;
--color: black;
}
[data-theme="dark"] {
--primary-color: rgb(107, 106, 134);
--secondary-color: #818cab;
--font-color: #e1e1ff;
--bg-color: #4d5055;
--heading-color: #63656d;
--color: white;
}
body {
background-color: var(--bg-color);
color: var(--font-color);
}
h1 {
color: var(--secondary-color);
}
a{
color: var(--primary-color);
}
input {
color: var(--color);
}
HTML part
<div class="input-field" data-theme="dark">
<input type="text" id="searchquery" placeholder="Type here">
</div>
I was trying to it with this code, but it changes for both dark and light mode.
input, select, textarea{
color: #ff0000;
}
EDITED: I add the content from answer below. It works now with only one problem, when I change to the light mode the input text color remains white, but suppose to be black color.
In your case, you need to add the attribute data-theme="dark" in the labels or any parent for it take effect. I hope this can help you.
:root {
--primary-color: rgb(82, 80, 144);
--secondary-color: #536390;
--font-color: #424242;
--bg-color: #fff;
--heading-color: #292922;
--color: black;
}
[data-theme="dark"] {
--primary-color: rgb(107, 106, 134);
--secondary-color: #818cab;
--font-color: #e1e1ff;
--bg-color: #4d5055;
--heading-color: #63656d;
--color: red;
}
body {
background-color: var(--bg-color);
color: var(--font-color);
}
h1 {
color: var(--secondary-color);
}
a{
color: var(--primary-color);
}
input {
color: var(--color);
}
<h1 data-theme="dark">Input with data-theme attribute "dark"</h1>
<div class="input-field" data-theme="dark">
<input type="text" id="searchquery" placeholder="Type here">
</div>
<h1>Input wihout data-theme attribute "dark"</h1>
<div class="input-field">
<input type="text" id="searchquery" placeholder="Type here">
</div>
I'm using a (now older) version of react-boilerplate which came with CSS Modules. What's nice about them is that you can create variables and import them in other CSS files.
Here's my colors.css file
:root {
/* Status colors */
--error: #842A2B;
--success: #657C59;
--pending: #666;
--warning: #7E6939;
}
When I'm importing that file I just have to use at the top of my .css file:
#import 'components/App/colors.css';
I'm looking to have the option for two themes for my website and I would like to be able to dynamically update those variables with Javascript. What's the best way to do this?
Edit: I was hoping there's a way to update the colors.css file and not have to do conditional imports in all the components that draw from two possible css files... let me know if there's a way to do that and if there is I'll change the accepted answer. Thank you to all who answered!
I would just use the default color vars on the element/body/whatever, then put the alternate theme colors in another class, and toggle the theme class via JS. Here's a demo.
$("button").on("click", function() {
$("body").toggleClass("foo");
});
body {
--red: red;
--blue: blue;
--yellow: yellow;
background: #ccc;
text-align: center;
font-size: 5em;
}
.foo {
--red: #ce1126;
--blue: #68bfe5;
--yellow: #ffd100;
}
.red {
color: var(--red);
}
.blue {
color: var(--blue);
}
.yellow {
color: var(--yellow);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="red">RED</span> <span class="blue">BLUE</span> <span class="yellow">YELLOW</span>
<br>
<button>click me</button>
I would have 2 sheets and conditionally switch between the two:
colours.scss
:root {
/* Status colors */
--error: #842A2B;
--success: #657C59;
--pending: #666;
--warning: #7E6939;
}
otherColours.scss
:root {
/* Status colors */
--error: #FF0000;
--success: #00FF00;
--pending: #6666FF;
--warning: #FF00FF;
}
then in your react code import them and use them as you wish:
import styles from 'colours.scss';
import alternativeStyles from 'otherColours.scss';
...
{this.props.useNormalStyle ? styles.myClass : alternativeStyles.myClass}
Is this what you are looking for?
// get the inputs
const inputs = [].slice.call(document.querySelectorAll('.controls input'));
// listen for changes
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
function handleUpdate(e) {
// append 'px' to the end of spacing and blur variables
const suffix = (this.id === 'base' ? '' : 'px');
document.documentElement.style.setProperty(`--${this.id}`, this.value + suffix);
}
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
body {
text-align: center;
}
img {
padding: var(--spacing);
background: var(--base);
-webkit-filter: blur(var(--blur));
/* 👴 */
filter: blur(var(--blur));
}
.hl {
color: var(--base);
}
/*
misc styles, nothing to do with CSS variables
*/
body {
background: #193549;
color: white;
font-family: 'helvetica neue', sans-serif;
font-weight: 100;
font-size: 50px;
}
.controls {
margin-bottom: 50px;
}
a {
color: var(--base);
text-decoration: none;
}
input {
width:100px;
}
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
<div class="controls">
<label>Spacing:</label>
<input type="range" id="spacing" min="10" max="200" value="10">
<label>Blur:</label>
<input type="range" id="blur" min="0" max="25" value="10">
<label>Base Color</label>
<input type="color" id="base" value="#ffc600">
</div>
<img src="http://unsplash.it/800/500?image=899">
<p class="love">😘</p>
<p class="love">Chrome 49+, Firefox 31+</p>
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">
<!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'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;
}