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.
Related
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?
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 new in front-web development. I am creating a subscription form. I need to highlight the subscribe button when user clicks on the input field. How can I do it by using CSS? I don't want to use JavaScript. My HTML code is below:
HTML:
<form>
<input type="text" placeholder="Your email ID">
<input type="submit" class="submit_button" value="Subscribe">
</form>
http://jsbin.com/pagosokipu/edit?html,css,js,output
required css
input[type='text']:focus ~ input[type='submit']{
box-shadow: 0 0 2px 2px #555;
}
read about ~ selector here .. https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectors
So currently I'm trying to edit the general layout and look of html input forms. Heres a snippet of my code for my html input forms:
<p> <form action='register.php' method="POST"></p>
<p>First Name: <input type="text" name="firstName" />Last Name: <input type="text" name="lastName"/></p>
<p>Address: <input type="text" name="address" /></p>
<p>City: <input type="text" name="city" /></p>
And the css that edits this is:
#Address, #emailAddress, #password, #confirmPassword, #firstName, #lastName{
width:50%;
outline: double 1px #FFA500;
height:16px;
padding:10px;
}
Problem is, nothing changes with this code. Shouldn't this change my html input forms?
Try using the id attribute instead of the name attribute on your html.
<input type="text" id="firstName" />
It'd be much better to define a style for all of your input elements at once:
input {
width: 50%;
outline: double 1px #FFA500;
height: 16px;
padding: 10px; }
You should read up on CSS selectors.
Here are some quick observations:
improper nesting of elements. Example, opened form tag within paragraph tag. Also, form tag isn't closed
use "id" attribute instead of "name"
be sure that #Address matches the input id (currently, it doesn't)
city input id isn't reflected in the CSS
You need to assign an ID or class to the input.
Remember, with CSS;
ID = #object
Class = .object
<p>First Name: <input type="text" name="firstName" id="firstName" />
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/