I have email input with background image as symbol on it. The issue is input works properly if user adds data but if they choose to select suggestions provide by browser, the image just hides.
See below HTML and CSS.
.login-form-email {
border-radius: 6px;
background-color: #fff;
background: url(img/envelop.png) no-repeat scroll 7px 7px;
padding-left: 40px;
}
<div class="form-group">
<label class="short-description"> Email </label>
<input id="username" name="username" type="text" class="form-control login-form-email" autocomplete="off" required>
</div>
This snippet might not work but I'll add snapshot of how it looks.
Here is the image 1 on how it looks initially.
Now, when I select the autosuggestion, it weirdly looks like this. (See envelop symbol is removed.)
You can wrap <input/> element in <div> and add styles to div::before. if you do it in this way, your input will be responsive also.
With -webkit-autofill you can change autocomplete styles in Webkit browsers.
.input-wrapper{
display: inline-block;
margin-left:-25px;
}
.input-wrapper::before {
content: "";
background: url(https://img.icons8.com/external-justicon-flat-justicon/64/000000/external-email-notifications-justicon-flat-justicon.png) no-repeat scroll 0px 0px;
background-size: 20px 20px;
padding-left: 30px;
position: relative;
left: 15%;
}
.login-form-email{
border-radius: 6px;
padding:5px 10px 5px 28px;
}
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px white inset !important;
box-shadow: 0 0 0 30px white inset !important;
}
<div class="form-group">
<label class="short-description" for="email"> Email </label>
<div class="input-wrapper">
<input
id="email"
name="email"
type="email"
class="form-control login-form-email"
required
/>
</div>
</div>
this is because of when you select the suggestion value it will be autofill the field and the browser has the default autofill background property.
you have used the sort-hand property for the background so when you autofill the field value the background property will changed.
please use separated properties for that like this way.
.login-form-email {
border-radius: 6px;
background-color: #fff;
background-image: url(img/envelop.png);
background-repeat: no-repeat;
background-position: 7px 7px;
padding-left: 40px;
}
The problem is that currently the browser's default styling for this can not be overridden, or there is no direct solution to do so, see here:
How to avoid "-internal-autofill-selected" style to be applied?
The alternative solution is to use a before element, like so:
.form-group:before {
content: "";
background: url(https://emojipedia-us.s3.amazonaws.com/source/skype/289/envelope_2709-fe0f.png) no-repeat scroll 0px 0px;
padding-left: 20px;
background-size: 20px 20px;
z-index: 999;
position: relative;
left: 65px;
}
.login-form-email{
text-indent: 30px;
}
<div class="form-group">
<label class="short-description"> Email </label>
<input id="username" name="username" type="text" class="form-control login-form-email" autocomplete="off" required>
</div>
if you want to change the background color of auto-filled input you need to use these:
UPDATED:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-box-shadow: 0 0 0 30px white inset !important;
background: url(https://img.icons8.com/external-justicon-flat-justicon/64/000000/external-email-notifications-justicon-flat-justicon.png) no-repeat scroll 0px 0px;
background-size: 20px 20px;
}
Related
I want to preface this by saying that this website comes highly recommended and was recommended by my professor to help "learn on our own." My question is probably incredibly simple and I apologize if it seems as a "waste of space". I am doing an assignment that requires creating a submittable proper functioning form in vim using HTML and CSS for styling on the course's server.
I have it all laid out as is, however, I have multiple labels in the body ("First Name"/"Last Name" "Class year selection box"/ "address"/"City"/ and "email". The First Name, Last Name, and Email are all what I am trying to style as "red text" to denote that these are the required fields.
I have the code set up to where these are required in order to submit the form, but I cannot figure out how to style it in the header to where I can differentiate which labels need to be in "red". As it is now, when I insert " Label { color:red; } in the header, it turns all of the text into red. Is there a way to denote specific labels to be red and the non-required labels to remain in black text color? I have tried to insert numbers into the label inputs to denote the different labels in need of a red text color but it applies it to all of the text on the form.
Is there anyway to properly add an identifying feature into a label to allow only the chosen labels as being red?
I appreciate any feedback and I apologize again if this is a waste of time for seasoned coders/developers to have to answer this question. Any input is appreciated.
How my form looks now online
The header (that has it all red)
The (this is where I am lost with inserting class properly)
At your HTML file add a class to each label you want to target individually, e.g.
<span class="label firstName">Joe</span>
At your CSS target this class and format the way you want, e.g.
.firstName {color: #f44336;}
This will target your label with the class of firstName and color the text RED.
There are multiple ways to approach this. If you are allowed to use only HTML and CSS, you can try to create multiple div's in the HTML file and create a CSS property in the CSS file that "styles" the required fields.
HTML
<div class="forms-box">
<h2>My Forms</h2>
<form>
<div class="user-box">
<input type="text" name="" required="" />
<label>First Name</label>
</div>
<div class="user-box">
<input type="password" name="" required="" />
<label>Last Name</label>
</div>
<div class="user-box">
<input type="password" name="" required="" />
<label>Last Name</label>
</div>
<div class="user-box3">
<label>Class year</label>
<select type="checked" required="" name="class-year">
<option value="2021">2021</option>
</select>
</div>
<div class="user-box">
<input type="password" name="" required="" />
<label>Address</label>
</div>
<div class="user-box">
<input type="password" name="" required="" />
<label>City</label>
</div>
<div class="user-box">
<input type="password" name="" required="" />
<label>Email</label>
</div>
</form>
</div>
CSS
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: linear-gradient(#141e30, #243b55);
}
.forms-box {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
border-radius: 10px;
}
.forms-box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.forms-box .user-box {
position: relative;
}
.forms-box .user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.forms-box .user-box label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: 0.5s;
}
.forms-box .user-box3 label {
color: #fff;
font-size: 16px;
margin-bottom: 10px;
margin-right: 40px;
}
.forms-box .user-box3 select {
color: #000;
margin-bottom: 20px;
}
.forms-box .user-box input:focus ~ label,
.forms-box .user-box input:valid ~ label {
top: -20px;
left: 0;
color: #ff0000;
font-size: 12px;
}
I have created a mock up which lists all the required fields that need to be filled before submitting.
Here is the link to my mockup
I had a problem where a text on a button went over the edge of the button. The text on the button was: "Thanks". I solved that with adding the below to the code. This solved the problem.
HTML
<div class="sign-up">
<p class="sub-header">#Helpers.GetText(CurrentPage, "signupHeaderText", CurrentPage.Parent)</p>
<form id="signupForm">
<div class="form-group">
<label class="sr-only" for="name">#Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)</label>
<input type="text" class="form-control" placeholder="#Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)" id="name" name="name" required />
</div>
<div class="form-group">
<label class="sr-only" for="email">#Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)</label>
<input type="email" class="form-control" id="email" name="email" placeholder="#Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">#Helpers.GetText(CurrentPage, "signupCtaButtonText", CurrentPage.Parent)</button>
</form>
</div>
CSS
.btn.btn-default.active,.btn.btn-default:active,.btn.btn-default:hover {
background-color: #71a0af;
color: #fff;
box-shadow: none
<!-- i added the below code to this class: -->
text-align: left;
padding-left: 12px;
width: 90px;
}
The problem is now that i discovered that another button is using the same class, but the text is here: "Yes please". That means that the button now is to small, and the text is flying over the side again.
What is the best solution on this problem? Should I make another class for the other button, or can I make it responsive, so that the button is adapting to the text?
Best Regards
This is an excerpt of my download class (because I mainly use it for download source code or download buttons above an article):
.download
{
display: inline-block;
/* gradient */
background-color: #627A85; /* old browsers */
background-image: -moz-linear-gradient(top, #8A9FA9 0%, #4B5E66 100%); /* firefox */
/* some other gradients removed here, for brevity */
border: none;
border-radius: 6px;
/* some other settings here removed for brevity */
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4), -2px -2px rgba(0, 0, 0, 0.2) inset;
line-height: 24px;
margin: 10px 0 0;
font-size: 16px;
padding: 5px 12px 7px 15px;
}
As you can see: no fixed width. The main part is the padding and the use of inline-block.
Am trying to make my fieldset data to be at center of the page but it displays in my page towards left. It displays fine fiddle, http://fiddle.jshell.net/8SuLK/ but not displaying to center of page in browser. How to go about.
Thanks in advance.
Remove position from fieldset and try like this: DEMO
CSS:
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px auto;
text-align:center;
display:block;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
width:70%;
border: 2px groove threedface;
}
If you don't need to have your fieldset positioned as fixed then you can center it in two ways.
1) Setting a width to your fieldset and add auto to its margin property.
EXAMPLE
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
border: 2px groove threedface;
width:75%;
}
DEMO http://fiddle.jshell.net/8SuLK/3/
2) Adding a wrapper to your fieldset and set it as text-align:center; and then set display:inline-block; to the fieldset.
EXAMPLE
<div class="wrapper">
<fieldset>
<label>First Name:</label>
<input type="text" />
<label>Middle Name:</label>
<input type="text" />
<label>Last Name:</label>
<input type="text" />
<label>Date of Birth:</label>
<input type="date" />
</fieldset>
</div>
.wrapper{text-align:center;}
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
display:inline-block;
border: 2px groove threedface;
}
DEMO http://fiddle.jshell.net/8SuLK/4/
PS. Just a reminder in your jsfiddle you can see the syntax highlighter showing in red the syntax errors. In your case the last closing tag, </fieldset> was in red because each input tag wasn't closed. Remember the right syntax for input is <input type="text" />.
Furthermore it's good practice to add the id to each input <input type="text" id="firstname" /> and then specify what the label is for like <label for="firstname">First Name</label>
I want to create an error box for a form like the one below.
I already themed the input box and am using jQuery validation to display errors. However I can't get that error box right. I think I'll need to put that together with three tags, but I don't know what tags to use (jQuery validation uses a label tag to display the error).
My current code for the error is:
<label for="email">
<span>Email:</span>
<input type="text" id="email" name="email" class="error">
<label for="email" class="error" style="">Az e-mail címet kötelező megadni</label>
</label>
I must make this IE7 compatible.
I made the following changes:
<div class="dataline">
<div class="label">Label:</div>
<div class="field"><input type="text" id="name" name="name" /></div>
<div class="arrow"></div>
<label class="error">Error text</label>
<div class="ender"></div>
</div>
I set the arrowhead as an image for the class arrow so now it looks perfect. Basicly I used 4 left floated block elements (label, input, arrowhead and bubble body). Now I only have two problems: the arrowhead is displayed even when there's no error. How can I hide it when the label is not after it? My other problem is that the container div is 800px wide and if the error text is long, it wraps around to the next line. How can I avoid it?
My css is:
div.dataline {
margin: 10px 0 0 0;
white-space: nowrap;
width: 3000px;
owerflow: visible;
height: 60px;
}
div.field {
float: left;
}
div.label {
float: left;
width: 120px;
margin: 20px 0 0 0;
}
div.arrow {
background-image: url('gfx/redarrow.png');
margin: 7px 0 0 10px;
background-repeat: no-repeat;
width: 20px;
height: 45px;
float: left;
}
div.ender {
background-image: url('gfx/bubbleend.png');
margin: 7px 0 0 0px;
background-repeat: no-repeat;
width: 3px;
height: 45px;
float: left;
}
label.error {
height: 27px;
background-image: url('gfx/bubblemiddle.png');
float: left;
padding: 9px;
margin: 7px 0 0 0;
}
the following fiddle is a good start for your implementation:
http://jsbin.com/aReQUgay/1/edit
#email.error
{
border-color: red;
}
#email.error + label
{
background-color: red;
}
I have a search box like below and i am using bootstrap to give a flexible layout. How can use a design like below and make sure i can get a stretchable search box.
You'd need a container to put your input box in, and put a front and end div to it. Depending on browser compatibility you might want to add a few more div's to make sure your input box is shown properly in browsers like IEX7/8 though.
So you'd have the following:
<form class="searchbox">
<input type="text" class="text" />
<input type="submit" class="submit" />
</form>
Accompanied by the following example CSS
form.searchbox { background:url(leftside_image.gif) 0 0 no-repeat; padding-left:15px; }
form.searchbox input.text { border:none; border-top:1px solid #999; border-bottom:1px solid #999; height:25px; line-height:25px; padding:0 5px; }
form.searchbox input.submit { background:url(rightside_image.gif); }
Add your Html part like this
<div class="searchbox">
<input class="lightsearch" type="text" name="s" onfocus="doClear(this)" value="">
</div>
css part, download a search box image and replace it with the name
.searchbox input.lightsearch {
background: url("images/lightsearch.png") no-repeat scroll 0 0 transparent;
border: 0 none;
color: #575757;
font-size: 11px;
height: 19px;
margin-top: 24px;
padding: 2px 5px 2px 24px;
width: 170px;
}