Is there some sort of state(like :hover, :focus, :active) for when typing in an input field only using CSS or does this have to be done in another way like JavaScript?
What I want to achieve is to only display a character counter when someone is typing.
There is no state in css when typing in an input field.
Please see the link for more info about pseudo classes
https://www.w3schools.com/css/css_pseudo_classes.asp
The state for input when typing is possible in javascript.
Please see the code below.
document.getElementById("demo").addEventListener("keypress", myFunction);
function myFunction() {
alert("Someone is typing");
}
<input type="text" id="demo">
You can see more info about onkeypress in this link
https://www.w3schools.com/jsref/event_onkeypress.asp
Hope this helps.
Related
I already found threads about this topic like these:
How to hide <label for=""> CSS
How to select label for="XYZ" in CSS?
So I thought it's going to be easy, but for now I had no success.
The label I try to reach is this one:
Inside of code snippets I tried the following:
label[for=payment_method_angelleye_ppcp]
.label[for=payment_method_angelleye_ppcp]
label[for="payment_method_angelleye_ppcp"]
.label[for="payment_method_angelleye_ppcp"]
After a couple of Google sessions, I wasn't able to find any other way of writing. It also seems that you don't set a "." in front of it for this case, but I also tried it, of course.
I believe label[for="name"] is the correct format in general...
But it seems something is missing. Inside the label there is a text and an image, but I don't assume that this plays a role in selecting the label?
I put one in CSS and 1 in javascript
document.querySelector('label[for="ABC"]').style.color = 'blue';
label[for="XYZ"] {
color: red
}
<label for="XYZ">XYZ: </label>
<input id="XYZ">
<label for="ABC">XYZ: </label>
<input id="ABC">
Pierre's answer is good, I just want to clarify that label is an HTML element. Unless you have a CSS class "label", you would not be adding a period in front of the selector in CSS.
You're correct, the content (images and text) inside of a label will not affect the selector we're trying to use but there may be other CSS interfering with what you're trying to do.
i am trying to figure out how to prevent the contents of Material UI's date input from being automatically focused when inputing characters. For some reason, the focus is on whichever field I am typing in. For example if I am typing the year portion of the date, all four digits will be highlighted which means when I backspace, even if I mean to just clear one digit, all digits would be cleared. Please see image below this paragraph of what I mean.
Like I said, I think that behavior of clearing all digits with a single backspace is due to all digits of whichever current portion of the date being selected all at one.
I have tried to use the css ways like setting userSelect to 'none' for the input, as well as setting tabIndex to -1. That doesn't seem to do anything. Please see my code below:
<TextField
tabindex="-1"
className={`${classes.formInput} ${classes.dateInput}`}
classes={{ root: classes.dateInput}}
value={date}
name="date"
onChange={e => setFormField(e.target.getAttribute('name'), e.target.value)}
type="date"
required
label="Date"
variant="standard" />
Any help is appreciated. Thanks!
Looks like it is not possible to change this since the TextField is build on top of the native input element. If you take a look at the Mozilla docs about the native input you will see that this is currently the only way to input on type="date"
You can use the DatePicker from the MUI library this input does allow you to "backspace".
I hope this helps you!
I've the input buttons without any class or id and have onclick attr on that something like this:
<input type="button" onclick="myfunc();" />
And there are other input type buttons too and want to style to the buttons which have onclick attribute.
So, here I can do like this:
input[onclick="myfunc();"]{color: red;}
But in the onclick there may be any function like myfunc(), thisfunc(), or anyfunc().
So how can I select those input buttons which have onclick attribute.
The value can be omitted:
input[onclick]{color: red;}
On an unrelated note, this seems like an interesting use case. I would probably use something like this, perhaps styling the border or something instead of the text, in order to highlight form elements (or any other elements) with event handler attributes, for "debugging" purposes.
$(function(){
$("#mybutton").click(function(){
$(this).css("color","red");
});
});
You can also JQuery for your solution. Add attribute id="myButton" to your input button.
Does anybody know a way to input:focus an element only on first click?
<style>
input[type='text'].error:focus{border-color:#f00}
</style>
So, if the user "focus out" it returns to the original border color.
Thanks in advance for any hint.
Edit
I wasn't sure at all. Thanks #blender.
I think the easist way to do it is using jquery or similar, right?
I am confused as to what you mean by "only on first click". If you want to style an input on click, you can just use this CSS:
input[type="text"].error:focus { border-color: #f00; }
And this HTML:
<input type="text" class="error" />
That will style the input border given it has the class of error (if you are adding/removing the class dynamically that is).
However, if you are styling for errors (like if the user hasn't filled out the form), you might want to try something like this:
input[type="text"]:invalid { border-color: #f00; }
input[type="text"]:valid{ border-color: #; } //If form is filled in
Then in your HTML:
<input type="text" required />
Does that help answer your question a little bit?
As #Blender said, it does not seem possible in pure CSS.
I would suggest to handle focusin and focusout events to add a class to an element and use data- attributes to get if element was already clicked or not.
Have a look at this jsFiddle.
For all who have the same or a similar question, here's is a possible jQuery solution:
$('input').on('focusout',function(){
$(this).removeClass('error');
});
This will remove the error class on :focus out.
When the user :focusin another time the input element, it will return to the default color.
Example default border-color with css:
<style>
input[type='text']:focus {border-color: black;}
</style>
I'm trying to create a very basic chat system, part of which will be the entry box for lines of chat. If the user is logged in, that's all I need; but if the user is not logged in, I want an additional text box to allow them to enter their name.
I have the following HTML (although of course it can be altered):
<form>
<input type="text" placeholder="Name?" name="name" id="name"> <!-- This line may be absent -->
<input type="text" placeholder="What do you want to say?" name="say" id="say">
</form>
Is it possible to style this with CSS so that #name and #say together fill the whole width of the form, with #say taking all the width if #name is absent?
(The backend is Ruby on Rails; I have javascript available, so can use a JS solution, but would prefer pure CSS if possible)
For a simple, all-CSS solution, try the first-child pseudo-selector to overide a default half-width when #say is the first element inside of the form:
#name, #say{width:100px}
#say:first-child{width:200px}
This works perfectly fine with your simple markup structure. (I've tested it)
With whichever of the two languages you'll be using to determine whether the user is logged in, create a conditional statement that adds a html class to the input field that alters it's width say .input-full and .input-partial
IF user is logged in
SET class to input-full
ELSE
SET class to input-partial
ENDIF
sorry for the psedo code, then have appropriate CSS for each.
oooh, didn't see the CSS only, sorry. Without CSS3 and a disregard for IE I don't think you can do this with straight CSS.