I am trying to put an effect on this email input so that when it is clicked on, it has a red border, but it has a problem where a white border also appears as well, and I want to remove this.
the code is:
<form action="#">
<input type="email" name="email" required placeholder="Your Email"/>
<input type="submit" name="submit" value="Subscribe"/>
</form>
[type="email"]{
padding:.7rem;
border-radius:.3rem;
border:none;
margin-right:2rem;
&:focus{
border:4px solid red;
}
}
Related
This is my html form inside a card html. This form appears after an onlick function which works fine. But the submit button of the below form doesn't show hover effect.
<!-- Update details form here -->
<div class="UpdateForm-section">
<form action="/add_address" method="post">
<label>Car Name</label>
<input type="text" value="" name="ev_name" placeholder="Model name"><br>
<label>Manufacturer</label>
<input type="text" value="" name="ev_manufacturer" placeholder="Brand name"><br>
<label>Year</label>
<input type="number" value="" name="ev_year" placeholder="YYYY"><br>
<label>Battery size</label>
<input type="number" value="" step="any" name="ev_battery" placeholder="Capacity in Kwh"><br>
<label>Range</label>
<input type="number" value="" name="ev_range" placeholder="Range in Km"><br>
<label>Cost</label>
<input type="number" value="" name="ev_cost" placeholder="Price in €"><br>
<label>Power</label>
<input type="number" value="" name="ev_power" placeholder="Power in Kw"><br>
<br>
<input type="submit" id="update_submit" value="Update details" name="submit_button"/>
</form>
</div>
And my css file is:
#update_submit {
width: auto;
background-color: #4CAF50;
color: white;
padding: 6px 10px;
margin: 4px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
#update_submit : hover {
background-color: #ab1313;
}
I don't why my hover effect isn't visible. Am I doing anything wrong? Can anyone help me out?
You are adding space in #update_submit : hover remove spaces and write like this
#update_submit:hover
The colon symbol must be right next to both
#update_submit:hover {
background-color: #ab1313;
}
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'm trying to make my check boxes align and stack such as http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_checkbox for example.
The page that I'm working on is http://juniorgoldreport.com/landing-page/
I've tried to use display: inline; and text-align: left; as well as float: left;. I'm not sure how to go about fixing this. The class chk_bx is there only because I was trying my best to try and target just that section of the form.
This is my html:
<form action="action_page.php">
<fieldset>
<div id="form_jgrsh">
First name:<br>
<input type="text" name="firstname" placeholder="Please enter first name">
<br>
Last name:<br>
<input type="text" name="lastname" placeholder="Please enter last name">
<br>
Email:<br>
<input type="text" name="email" placeholder="Please enter email">
<br><br>
<div class="chk_bx">
<input type="checkbox" name="sub_list" value="SH">Subscribe me to Stockhouse
<br>
<input type="checkbox" name="sub_list" value="JGR">Subscribe me to Junior Gold Report
</div>
<input type="submit" value="Submit">
</div>
</fieldset>
</form>
css
#form_jgrsh {
width:300px;
margin:0 auto;
text-align:left;
}
#form_jgrsh .chk_bx{
}
#form_jgrsh input, textarea {
width:100%;
border: 2px solid black;
line-height: 30px;
}
.exc-form {
text-align:center;
}
Problem is width:100%. give width to checkbox
#form_jgrsh {
width:300px;
margin:0 auto;
text-align:left;
}
#form_jgrsh .chk_bx{
}
#form_jgrsh input, textarea {
width:100%;
border: 2px solid black;
line-height: 30px;
}
.exc-form {
text-align:center;
}
.chk_bx input {
width:20px !important;
}
<form action="action_page.php">
<fieldset>
<div id="form_jgrsh">
First name:<br>
<input type="text" name="firstname" placeholder="Please enter first name">
<br>
Last name:<br>
<input type="text" name="lastname" placeholder="Please enter last name">
<br>
Email:<br>
<input type="text" name="email" placeholder="Please enter email">
<br><br>
<div class="chk_bx">
<input type="checkbox" name="sub_list" value="SH">Subscribe me to Stockhouse
<br>
<input type="checkbox" name="sub_list" value="JGR">Subscribe me to Junior Gold Report
</div>
<input type="submit" value="Submit">
</div>
</fieldset>
</form>
Change this line here:
// First line
#form_jgrsh input[type="text"], textarea {
width:100%;
border: 2px solid black;
line-height: 30px;
}
You were setting all inputs to width: 100% which was pushing the text below the checkboxes. Only set it to to type="text" inputs.
Fiddle: https://jsfiddle.net/xa5fv1p0/
Your problem is that you have width:100% assigned to all input fields, which is causing the checkboxes to take up the entire width.
Assign a class to the checkboxes and overwrite the width attribute like so:
#form_jgrsh .checkbox {
width: auto;
}
Fiddle: https://jsfiddle.net/yhc4rujh/
I'm trying to create a log in form and my html so far is:
<body id="login">
<div id="wrapper">
<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">
<h1>Login Form</h1>
<label>
<span>Email Address:</span>
<input id="email" type="text" name="email" placeholder="Enter a valid email address" />
</label>
<label>
<span>Password:</span>
<input id="password" type="password" name="password" placeholder="Password" />
</label>
<label>
<span> </span>
<input type="submit" value="Send" />
</label>
</form>
</div>
</div>
I want to style it using CSS. How can I access:
a) the overall form to change the overall style
b) the email address title and box
c) the button
I have tried using . # > but confused myself now. It's probably a really silly mistake I'm making but I can't figure it out...
Here's how can you access:
a) the overall form to change the overall style
Use #loginform {/* CSS rules */} to address the overall style of the form container. Since there's no other element except the form, it will work as if you were targeting the form itself.
b) the email address title and box
use #loginform label {/* CSS rules */} to target the CSS rules at the label and #email{} to target the email input box. You can re-use this last rule for the other items by adding their IDs (e.g. #email, #password {/* CSS rules */})
c) the button
Use input[type=submit] {/* CSS rules */} to style the submit button.
I solved like this
CSS
<style type="text/css">
form{
text-align: center; /* To align the form center */
background-color: orange; /* sets the background-color to orange */
}
#password{ /* If you use class attribute, use .password{} */
/* to modify this section*/
}
#email{
width: 200px; /* to size the email bar*/
}
#submit_button{
color: #fff; /* Text Color*/
background-color: #5cb85c; /* Background color green*/
border-color: #4cae4c; /* border color light green*/
}
</style>
HTML
<div id="wrapper">
<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">
<h1>Login Form</h1>
<label>
<span>Email Address:</span>
<input id="email" type="text" name="email" placeholder="Enter a valid email address" />
</label>
<br /><br /><br />
<label>
<span>Password:</span>
<input id="password" type="password" name="password" placeholder="Password" />
</label>
<br /><br /><br />
<label>
<span> </span>
<input id="submit_button" type="submit" value="Send" />
</label> <br /><br /><br />
</form>
</div>
</div>
Or instead you can use "class" or "id" to the form,label and input field to provide them individual style.
Wrapping the label around the input is one way to do things (and it is technically valid), the other way is to use the for attribute. The later is typically considered more acceptable to some because it avoids the need for the extra span.
<form id="loginform" action="" method="post">
<div class="input">
<label for="username">Username</label>
<input type="text" name="username" id="username" />
</div>
<div class="input">
<label for="password">Passowrd</label>
<input type="password" name="password" id="password" />
</div>
<input type="submit" value="Log On" class="btn" />
</form>
Would then be styled like:
.input > label:after /* To place style/content after the label */
{
content: ':';
}
.input > label /* To target the label */
{
display:block; /* Puts the label above the input, just an example */
}
.input > input /* The input. */
{
background: yellow; /* for instance */
}
.input /* The whole input and label pair */
{
margin-bottom: 3px; /* Add space bellow each input, or whatever */
}
Otherwise, nesting the input inside the label removes the need for the for attribute on the label element, and id on input element. So, if we use your HTML:
<body id="login">
<div id="wrapper">
<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">
<h1>Login Form</h1>
<label>
<span>Email Address:</span>
<input id="email" type="text" name="email" placeholder="Enter a valid email address" />
</label>
<label>
<span>Password:</span>
<input id="password" type="password" name="password" placeholder="Password" />
</label>
<label>
<span> </span>
<input type="submit" value="Send" />
</label>
</form>
</div>
</div>
We could style it like this:
#login > label
{
/* Style for input pair */
margin-bottom: 3px;
}
#login label > span
{
/* Style for the label text */
display:block;
}
#login > label > input
{
/* Style for the input itself. */
background: yellow;
}
Since you're just starting out and just want to see it working, maybe it would be simpler for you to attach an 'id' attribute to each html element, and then access them in your css that way (for the specifics you want to edit, e.g. email title, email input, submit button).
For example:
html
<input id="submitBtn" type="submit" value="Send" />
css
#submitBtn{ color:black }
If this doesnt work,
1.) Clear you cache
2.) Make sure your css file is actually included in your html
3.) Make sure each "ID" on the page attached to an element is unique
if that doesnt work, use your dev tools and fiddle around:
hit (f12) in any browser
First of all I recommend you changing the structure of your code to:
...
<form id="login" name="login" action="" method="post" accept-charset="utf-8" class="smart-green">
<h1>Login Form</h1>
<label for="email">Email Address:</label>
<input id="email" type="text" name="email" placeholder="Enter a valid email address" />
<label for="password">Password:</label>
<input id="password" type="password" name="password" placeholder="Password" />
<input type="submit" value="Send" />
</form>
And then the answers are:
a) access to the form
form#login{
...
}
b) the email address title and box
label[for=email]{
}
input[type=email]{
}
c) access the button
input[type=sbumit]{
...
}
I have form like this:
<form action="login_form.php" method="POST" id="login_form">
Email <input name="email" type="text" size="25" placeholder="type your email"/>
Password <input name="password" type="text" size="25" placeholder="type your password" />
<input type="submit" class="btn" value="" name="submit" />
</form>
and for submit button I use an image that is in my CSS:
.btnew{
background:url('img/login_button_1_1.jpg') no-repeat; width:270px; height:46px; border:none; cursor: pointer;
}
.btnew:hover{
background:url('img/login_button_1_1_light.jpg') no-repeat; width:270px; height:46px; border:none; cursor: pointer;
}
When page loading my form has as a submit button, the "login_button_1_1.jpg". When the user place mouse over the submit button, button changes to "login_button_1_1_light.jpg" successfully acording to my CSS. My problem is that the first time that the user places mouse over submit button, there is a very small delay until the image "login_button_1_1_light.jpg" appears. looks like it is not loaded with the page at the begining. Any idea how to fix this?
You can place hover image inside body tag to preload it.
<img src="img/login_button_1_1_light.jpg" style="display:none;" />