I have a form input element:
<input type="password" id="password" name="password" class="form-control" size="25" autocomplete="off" required>
I am styling it as such:
.form-control {
background-color: #010101;
&:-internal-autofill-selected {
background-color: #010101 !important;
}
}
But for some reason I'm getting a white RGB color appearing instead of the black background.
When I inspect the element I see the below:
When I click the color style to view wherer it is set it just shows me my CSS above with the dark background color.
Would anyone know where this colour is coming from?
Related
I am making a simple forms in html. The background is black so I want the typing text in white.
Here is what I have so far:
<form method="GET">
<input type="text" name="name" placeholder="Full Name"><br/>
<input type="submit">
</form>
I highlight the typing text in the picture "asdasd" I want the user can type their text in color white. I've tried color: #ffffff; in CSS, but it does not works.
Any help would appreciated.
You should be able to fix this by doing this:
<input type="text" name="name" placeholder="Full Name" style="color:white;">
For a neater look, you could also do this:
<input type="text" name="name" placeholder="Full Name">
input {
color:white;
}
Or, if you only want to apply the white text to one input, you could do this:
<input type="text" name="name" placeholder="Full Name" id="input1">
#input1 {
color:white;
}
If you want to make the placeholder the same color, or a similar color, use the solution by #Çağrı.
In css u should change both color of input and placeholder of input to white.
input[type=text],input[type=text]::placeholder{
color:white;
}
Try something like this?
input[type=text] {
background-color: #3CBC8D;
color: white;
}
I am seeing potentially strange behavior of web forms when modifying them via CSS.
I have the following HTML code of a simple web form:
.email {
background-color: #FFFEEE;
}
<form>
<fieldset>
<legend>Contact Us</legend>
Name:
<p>
<input class="name" type="text" size="30" placeholder="Name">
</p>
E-Mail:
<p>
<input class="email" type="text" size="30" placeholder="john#doe.com">
</p>
</fieldset>
</form>
Just in case, here is a link to the fiddle: https://jsfiddle.net/sge13t9r/3/
However, as in the picture below, while I only specified a background color, the size and style of the field changed as well. The browser used is Firefox. Can anyone please advise on the reasons for such behavior and how I should go about just changing the background color, without affecting the size and style?
Fiddle Screenshot:
Your name input is definitely getting a default padding from the Firefox browser. What you need to do is specify the padding for inputs and use the box sizing property. This is the CSS you should have:
.email {
background-color: #FFFEEE;
}
input {
padding: 2px;
box-sizing: border-box;
}
Here is what I currently have:
<script>
function colour(x){
document.getElementById(x).style.border = "1px green solid";
}
</script>
<p>Email<span style="color:red">*</span><input type="email" name="email" autofocus required/></p>
<p>Name<span style="color:red">*</span><input type="text" id="fname" name="fname" placeholder="First Name" required onfocus="colour(this.id)"/><span style="color:red">*</span><input type="text" id="lname" name="lname" placeholder="Last Name" required onfocus="colour(this.d)"/></p>
No matter what I do it will focus on the email, can I fix it?
You could fix it, with CSS. Just write some CSS like this.
input:focus {
border:1px solid green;
}
And your input fields are green bordered if they are in Focus. No Need for JavaScript in this case.
You can fix it without JavaScript you have to use border along with outline.
The outline property will disable the browser focus color.
input:focus {
outline: none;
border: 1px solid green;
}
no matter what i do, it focuses on the email
If you want to focus another input field, remove the autofocus property from your email field and add it to the field you want to focus at page load. If you don't want that a field is focused at page load, just remove the autofocus attribute.
I just want to know how to change the color of placeholder text in my html page.
I used
::-webkit-input-placeholder { color:red; }
It works, but changed the placeholder text colors in my whole page. So let me know if there is any way which we can specify the placeholders or input in html, so that we can change the place holder text color of desired area only.
try this code
.fname::-webkit-input-placeholder {
color: red
}
<div class="content">
<input type="text" name="firstname" class="fname" placeholder="placeholder">
</div>
<input type="text" name="lastname" class="lname" placeholder="placeholder">
or may be can use
.content ::-webkit-input-placeholder {
color: red
}
It will change placeholders only for Chrome. To get individual styles try this CSS instead:
.changed::-webkit-input-placeholder{
color: red;
}
.changed::-moz-placeholder {
color: red;
}
.changed:-ms-input-placeholder {
color: red;
}
<input type="text" class="changed" placeholder="Changed placeholder">
<input type="text" class="original" placeholder="Original placeholder">
Example: http://jsfiddle.net/wCFBw/25/
input {
color: black;
}
<input type="text" value="This is black" />
<input type="text" disabled="disabled" value="Why this is not black?" />
I don't know why that happens, but I suspect WebKit is trying to be smart with respect to letting the user know the <input> is disabled.
You can workaround this by also using the -webkit-text-fill-color property:
input.black {
color: black;
-webkit-text-fill-color: black
}
Please, make sure you're setting the colour to something that makes it apparent that the <input> is disabled.
Here's your demo, modified with the new property: http://jsfiddle.net/thirtydot/wCFBw/38/