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
Related
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;
}
}
I would like to have a form validation with Just HTML5 with Submit button style changes depends on the all the input validation values. ie to display Color of submit button in green if all the input fields are valid /Form is valid .
You can style the submit button based on the form's :valid or :invalid pseudo-class:
form:valid input[type="submit"] {
background-color: #cfc;
color: #060;
}
form:invalid input[type="submit"] {
background-color: #fcc;
color: #600;
}
label {
display: block;
margin: 0.5em 0;
}
<form>
<label>
Serial number:
<input pattern="[A-Za-z]{3}[0-9]{3}" required placeholder="Something like ABC123">
</label>
<label>
<input type="radio" name="radio" value="1" required>
One of these
</label>
<label>
<input type="radio" name="radio" value="2" required>
must be selected
</label>
<input type="submit">
</form>
The only validation that can be done with just HTML is to use the HTML5 'required' attribute which doesn't let a form to be submitted before you do something (click a radio button, fill a text field...).
You can't validate a form to your own likes, and you certainly can't dynamically change elements' CSS properties without JavaScript.
i use modx revolution 2.4 since some weeks and its login extra(plugin) to manage page permissions.
Everything works fine, but there is a yellow background color in the html input tags of the login form that can't be styled by my css stylesheet.
The color is also present on the regular modx login, so maby the style comes from an priorized stylesheet of modx.
i tried the following:
search the web
css style: input{ background: #fff !important;}
looking for priorized stylesheets in
manager/templates/default/css/login.css and
manager/templates/default/css/index.css
find stylesheets with the browser->view source code
add style directly to html input tag
but with no luck.
the html code of the login form looks as follows:
<div class="loginForm">
<div class="loginMessage">[[+errors]]</div>
<div class="loginLogin">
<form class="loginLoginForm" action="[[~[[*id]]]]" method="post">
<fieldset class="loginLoginFieldset">
<legend class="loginLegend">[[+actionMsg]]</legend>
<label class="loginUsernameLabel">[[%login.username]]
<input class="loginUsername" type="text" name="username" />
</label>
<label class="loginPasswordLabel">[[%login.password]]
<input class="loginPassword" type="password" name="password" />
</label>
<input class="returnUrl" type="hidden" name="returnUrl" value="[[+request_uri]]"/>
[[+login.recaptcha_html]]
<input class="loginLoginValue" type="hidden" name="service" value="login"/>
<span class="loginLoginButton"><input type="submit" name="Login" value="[[+actionMsg]]" /></span>
</fieldset>
</form>
</div>
</div>
the css code part of my stylesheet looks like:
input{
background: #fff !important;
color: #000;
font-size: 110%;
}
This yellow because autocomplite. How to disable - http://makandracards.com/makandra/24933-chrome-34+-firefox-38+-ie11+-ignore-autocomplete-off
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 am using angularJs form validation as follows,
<form ng-submit="submit()" name="form" novalidate class="css-form">
<input type="text" name='email' ng-model='formData.email' required>
<span class="error" ng-show="errorData.email != null">{{errorData.email}}</span>
<input type="submit" value="Login" ng-disabled="form.$invalid">
and css
input.ng-invalid.ng-touched{
border:1px solid red;
}
input.ng-valid.ng-touched{
border:1px solid blue;
}
input[required].ng-pristine{
/*border:1px solidred;*/
}
input.ng-valid.ng-dirty{
border:1px solid green;
}
When user typing in text box,error message works properly.But if user click submit button directly,it is not showing error and submitting the form without validating.
I want to show validation error if user click submit button.How it is possible in angularJs form validation.
The reason your form is being submitted is that your form is in fact valid.
Change your input into this:
<input type="email" name='email' ng-model='formData.email' required>
i.e. change type into email so that angular can validate the input as email.