Assuming I have a button and a textarea. The normal state of textarea placeholder is gray. When click on the button it should change the placeholder to black. How can I do it?
::placeholder is the pseudo class that will control the placeholder text of an input... You can set this in a class and then toggle the class or add the class to your element on click.
let ta = document.getElementById('ta')
function changeTAText(){
// the following would toggle on each click
//=> ta.classList.toggle('placeHolderText')
// The following would add it without the
// ability to toggle on click
ta.classList = 'placeHolderText';
}
btn.addEventListener("click", changeTAText)
.placeHolderText::placeholder {
color: black;
}
<textarea id="ta" placeholder="enter your text here"></textarea>
<button id="btn">Change Color of Placeholder Text</button>
I will post the partial code to make the placeholder red. Add a button and toggle the class of textarea placeholder-red on button click.
textarea.placeholder-red::placeholder {
color: red;
}
<textarea rows="4" cols="50" class="placeholder-red" placeholder="Describe yourself here..."></textarea>
Related
I have a pretty basic form of an e-mail input and submit button. I'm trying to do the following:
Have the e-mail input background be white
Have the Submit button be the same height as the input
When I try to change the background of the input in CSS, it only changes a small rectangle within the Angular Material input field. Also, the button doesn't change heights when I change the height property to 100%.
I'm sure I am missing something simple. Can anyone help?
<form>
<mat-form-field appearance="outline">
<mat-label>E-Mail</mat-label>
<input matInput placeholder="E-Mail" required>
</mat-form-field>
<button mat-raised-button color="primary" type="submit">Get Updates!</button>
</form>
That should get the input & the button to get equal hight:
form {
display:flex;
flex-direction:row;
}
And the reason the input element wont style. Is because you are tying to style an element in mat-form-field which is a different component. If you want to style inner component elements like in your case, you should do like so:
:host ::ng-deep mat-form-field {
input {
background-color:#fff;
}
}
I have a form that is structured similarly to the one below. How do I use CSS to style the input[type=submit] element when the input[type=text] is focused?
For example:
<form id="example">
<input type="text" name="search">
<input type="submit" value="Search">
</form>
<style>
#example > input[type="text"]:focus {
// please style input[type="submit"]
}
</style>
I'm trying to accomplish this because a wordpress theme has a search form with the search input and submit button inline. When a user focuses on the input, I want the input field and submit button to have the same border color change.
Alternatively, I could style the entire div around the input and submit button, but then we come back to the problem of styling another element when one element is focused.
Is this even possible with CSS3 or would I have to resort to a javascript function? (Last resort.)
If the structure in your actual code is the same as what you've posted in question, you can use + (adjacent) selector to select the submit button when there's focus on text input.
This is the selector you're looking for: #example > input[type="text"]:focus + input[type="submit"]
To read more about + selector, this answer to "What does the “+” (plus sign) CSS selector mean?" explains it in a short manner and even covers browser support.
Here is a snippet to show it in action. Doesn't look too pretty, but does the job :)
#example > input[type="text"]:focus + input[type="submit"] {
background: gray;
}
<form id="example">
<input type="text" name="search">
<input type="submit" value="Search">
</form>
Here is a way using JQuery, see fiddle https://jsfiddle.net/t33rdra6/2/
$(document).ready(function() {
$('input').blur(function() {
$('input[type="submit"]').removeClass("focus")
})
.focus(function() {
$('input[type="submit"]').addClass("focus");
});
});
Well, I'm tryin' to change the colour of a placeholder when hovering...
CSS
#principal form label textarea::-webkit-textarea-placeholder:hover {
color:#2278CE;
}
HTML
<textarea cols="93" rows="15" maxlength="1000" placeholder="Write here."></textarea>
I need to know if it's right, if it isn't, how to do.
The only change is the position of the :hover. You have to use the :hover pseudo element prior to ::-webkit-input-placeholder. Try this:
textarea:hover::-webkit-input-placeholder
{
color:#2278CE;
}
I have a button with an image that links to another page when pressed. It all works fine, except when I click on the button it blanks out, and the image does not reappear until something else on the page is selected. The HTML is as follows:
<input type="submit" class="personalbutton" value="" onclick="location.href='http://www.google.ca'">
The personalbutton CSS class:
.personalbutton {
background-image: url(../images/buttons/buttonimage.png);
width: 175px;
height: 50px;
}
How do I prevent this from happening?
Instead of using a tag of type 'submit' to create your button, try using the tag and see if you still have the same problem.
<button class="personalbutton" onclick="location.href='http://www.google.ca'">Click Me</button>
When a user clicks in the box below, the cursor and typed text are black. How could I make them the color of #DE2A00 ?
<div class="usernameformfield"><input tabindex="1" accesskey="u" name="username" type="text" maxlength="35" id="username" /></div>
Just use CSS:
#username{color:#000;} /* black when not with focus */
#username:focus{color:#de2a00;} /* green when input has focus - only affects this specific input */
<style>
#username {
color: #DE2A00;
}
</style>
Or you could have the color change when a user clicks on the field like so:
<script type=text/javascript src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>
<script type=text/javascript>
$(document).ready(function() {
$('#username').click(function(){
$(this).css({'color': '#DE2A00'});
});
});
</script>
It depends on what you want, I would check out this reference to start playing around with some things:
w3schools
and
css-tricks
You could these little JavaScripts:
onfocus="this.style.background = '#DE2A00'" onblur="this.style.background = 'white'"
A little shorter one:
input:focus { color: #DE2A00 }
I am assuming you need the text inside the text box in that color, if so do this
<input...type="text"...style="color: #DE2A00;"/></div>