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;
}
Related
When I apply ::after for my <p> element, it works fine, but when I use it for the ::placeholder pseudo-element on my input fields, it doesn't work:
p::after {
content: "*";
color: red;
}
#registerFirstName::placeholder::after {
content: "*";
color: red;
}
<!DOCTYPE html>
<html>
<body>
<input id="registerFirstName" tabindex="1" name="registerFirstName" title="" alt="" value="" required="required" maxlength="40" aria-required="true" placeholder="First Name" class="error" aria-invalid="true" type="text">
<p>I live in Ducksburg</p>
</body>
</html>
Output:
Can someone help me fixing this?
:after and :before are not supported in Internet Explorer 7 and under, on any elements.
It's also not meant to be used on replaced elements such as form elements (inputs) and image elements.
In other words it's impossible with pure CSS.
However if using jquery you can use
$(".mystyle").after("add your smiley here");
Psuedo elements do not work on empty elements such as <input>.
There are two problems with your code.
First, the pseudo elements can be set only for elements. Not for other pseudo elements.
Second, as others already mentioned, generated content pseudo elements (::before and ::after) are not supposed to work on empty elements (those that have no content between start and end tags in the markup) and usually they don't (there are some exceptions, but, IIRC, the only browser that allowed these pseudo elements for <input> was Opera with Presto engine).
So to add the asterisk in a cross-browser way, you need an extra element. For example, you can do the following:
/* selecting spans immediately following anything with the "placeholder" attribute */
[placeholder] + span::after{
content:"*";
color: red;
}
<input id="registerFirstName" tabindex="1" name="registerFirstName" title="" alt="" value="" required="required" maxlength="40" aria-required="true" placeholder="First Name" class="error" aria-invalid="true" type="text">
<span></span>
UPD: Sorry, I missed the part that the asterisk should be next to the placeholder text at first. Unfortunately, it's impossible with CSS. But you can use the floating label pattern instead of the placeholder, which makes it possible to add the asterisk in the needed place with ::after pseudo element, and also improves the accessibility of the form in comparison to the bare placeholder solution.
I am using jquery form validation and I need to apply color code for all the textboxes in the form without specifying each textbox id in the Css. Instead How to apply css for all the text box in the form using the form id. Please let me know is there any solutions.Thanks in advance.
#formID input[type="text"]{
Put your css here
}
in css, you can do this:
form input {
// Your formatting comes here..
}
or if you want this to apply for a specific form having an id="myForm":
#myForm input {
// formatting comes here for example: color:red;
}
The background knowledge for this is CSS Selectors.
If by textboxes you mean <input type="text"> and <textarea> elements, you can simply style them using the following:
#formid input[type=text],
#formid textarea {
/* CSS rules */
}
Note that <input> elements with types other than text exist. Read more about those here.
Try this...
#frm1>input[type="text"]{
border:1px solid red;
width:100px;
margin:1%;
}
<form id="frm1">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</form>
You can use the .children() function of the jQuery api to set the css properties of the form elements.
eg : jsFiddle
$('#FormID').children().css("property", "value");
When I click inside of an input box, I see the following "shadow":
Can this be disabled? If so, how?
EDIT:
GIF
And this is my code
<div class="col-xs-12"><input class="form-control" id="Password" name="Password" type="text" placeholder="Password" /></div>
I think you want to set 'outline: none' on the input css.
The question was answered there: How to remove the border highlight on an input text element
Set border to none or 0. Then for mozilla remove ghost padding.
.myInput {
border: 0;
}
.myInput::-moz-focus-inner {
border: 0;
padding: 0;
}
From the styling, it looks like you're using iOS.
Check out this thread Remove iOs input shadow.
It's a couple years old, but it might help.
I just put
border:none;
And worked, that blue border desapeared
Em maybe you can try to using outline:none,it will kill the the border when user click the input box
I have two forms on my site but am struggling to style them differently.
I want all text areas/inputs on the website to have the same style except for one form.
So all forms on the site use this css...
input, textarea {
background-color:#eae7e7 !important;
}
How do I go about changing the background color on another form as per below?
<div class="form-group">
<input type="email" class="form-control input-sm" id="name" placeholder="Your Name">
</div>
.form-control input, .form-control textarea doesn't seem to work?
An easy way is to add an id to the form in question:
<div class="form-control" id="my-form">
Then, style the inputs in css like:
#my-form input {your-style:value;}
.form-control input, .form-control textarea
Seems that you have this kind of code :
<div class="form-control">
<input>
</div>
Your CSS selector should be like this :
input.form-control, textarea.form-control don't forget the `!important` when you apply the css property
Try:
input.form-control {
background-color: #000 !important;
}
You'll have to add !important to your css also in order to overwrite the styles applied to input, textarea. However, if possible, you should remove the !important altogether unless 100% necessary.
Can we add space between the browse button and textbox for input type file ?Is that possible? Aslo can i add border color for the same textbox ?
thanks,
michaeld
Increasing spacing is not possible. Generally speaking, styling an input type="file" is extremely difficult. If you check cross-browser, you can see that different browsers render it differently. The only way to style it is to fake another element as input type="file"
Example: http://www.quirksmode.org/dom/inputfile.html
You should use css to do this:
Your html:
<input type="text" class="yourclass" name="yourname" />
<input type="submit" />
your css:
<style> input.yourclass { border:1px solid red; margin-right: 10px;} </style>
Hope this puts you in the right direction
It is working for me in Chrome.
input.file {
text-indent: initial;
}