I'm trying to make some beauty search box with css.
On chrome, this works fine, but on FF the search button is broken..
<form class="form-wrapper cf" action="" method="post">
<input type="search" placeholder="O que voce procura?" required>
<button type="submit">BUSCAR</button>
</form>
my input field css:
/* Form text input */
.form-wrapper input {
width: 230px;
height: 30px;
padding: 0px 10px 0px 30px;
padding-top:5px\9;
float: left;
font: 16px 'Maven Pro', Arial, Tahoma, serif;
color:#959595;
border: 0;
background: #eee url(imagens/lupa.png) no-repeat;
background-position:5px center;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff url(imagens/lupa.png) no-repeat;
background-position:5px center;
/*box-shadow: 0 0 2px rgba(0,0,0,.8) inset;*/
}
here is my fiddle: http://jsfiddle.net/NeRFC/
Open on Chrome and on Firefox to see the problem
How to fix it?
Just removed the width from .form-wrapper and it seems to work.
Try to add the mozilla rule to .form-wrapper input :
-moz-border-radius: 3px 0 0 3px;
Also, try to comment properly those lines:
In .form-wrapper input :
background: #eee url(imagens/lupa.png) no-repeat;
To
#background: eee url(imagens/lupa.png) no-repeat;
In .form-wrapper input:focus :
background: #fff url(imagens/lupa.png) no-repeat;
To
#background: fff url(imagens/lupa.png) no-repeat;
Maxime
Related
I have a simple input which contains an icon on the right side and text on the left side
Here is what I would like to have in mobile version:
here is what I have so far in desktop version
HTML
<div class="form_group">
<input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>
csss
#media only screen and (max-width: 768px) and (min-width: 375px)
.form_input {
font-size: 10px;
font-family: Roboto;
font-weight: normal;
width: 342px;
}
#input-icon {
background: url(../images/arrow-mobile.png) no-repeat scroll 7px 7px;
background-position: right;
/* opacity: 0.4; */
}
**
UPDATE
**
To simplify things here is my jsfiddle with the icon I am using :
http://jsfiddle.net/Mwanitete/z0x6uta2/2/
what do I need to do get what I want? I tried opacity but didn't work as expected?
.form_input {
font-size: 12px;
font-family: Roboto;
font-weight: normal;
width: 342px;
border: 1px solid #ccc;
border-radius: 5px;
}
#input-icon {
background: url(https://thumb.ibb.co/iAQtup/arrow_mobile.png) no-repeat scroll 7px 7px;
background-size: 7px;
background-position: right;
opacity: 0.4;
}
<div class="form_group">
<input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>
Result Preview:
You can also use this.
.form_input {
font-size: 10px;
font-family: Roboto;
font-weight: normal;
width: 342px;
border: none;
border-bottom: 1px solid;
}
#input-icon {
background: url('https://thumb.ibb.co/iAQtup/arrow_mobile.png') no-repeat scroll 7px 7px;
background-position: 100%;
background-size: 4%;
}
<div class="form_group">
<input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>
Here is solution based on Dementic's answer ,
.form_input {
font-size: 10px;
font-family: Roboto;
font-weight: normal;
width: 342px;
border: none;
border-bottom: 1px solid;
}
#input-icon {
background: url('https://thumb.ibb.co/iAQtup/arrow_mobile.png') no-repeat scroll 5px 5px;
background-position: right;
background-size: 12px;
height: 4px;
opacity: 0.4;
}
.form_input::-webkit-input-placeholder { /* WebKit browsers */
color: transparent;
}
jsfiddle for anyone interest to see the expected result
http://jsfiddle.net/Mwanitete/z0x6uta2/16/
Thanks all for help #StopActa2Though
you are able to change icon size inside the input field using background-size:20px;
example is given below according to your code
#input-icon {
background-size: 20px;
}
I'm stuck on a styling issue with WP's contact form 7 plugin again.
This screenshot shows how it looks - apparently, it's set to "width: 100" but the button is centred - so, it's not at 100%.
The code I used for my contact form is this:
/* my custom css*/
input[type=submit] {
background: none;
color: #1fbba6;
border: 2px solid #1fbba6;
border-radius: 50px !important;
padding: 14px 14px;
font-weight: 400;
font-size: 12px;
width: 140px !important;
}
.wpcf7 {
width: 100%;
}
input[type=select] {
width: 100% !important;
color: #d9d9d9;
}
input.wpcf7-form-control.wpcf7-submit:hover {
background: none;
color: #1fbba6;
}
.wpcf7-form select {
width: 100% !important;
}
/* classes that are provided from my theme*/
#media screen and (-webkit-min-device-pixel-ratio: 0)
template.min.css?ver=4.15.13:1
.kl-fancy-form-select {
height: 52px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: inset 1px 2px 0 rgba(0,0,0,.06);
background-image: url(../images/select-arrow.svg);
background-repeat: no-repeat;
background-size: 6px 12px;
background-position: calc(100% - 10px) 50%;
background-position-y: center;
background-position-x: calc(100% - 10px);
}
<label>[text* your-name placeholder "Dein Name*"] </label>
<label>[email* your-email placeholder "Deine E-Mail*"] </label>
<label>[tel phone placeholder "Telefon"]</label>
<label>[select* class:zn_form_input class:form-control--light class:kl-fancy-form-select training "Ich interessiere mich für:" "Personal Training" "Mini-Kurse" "Rückbildung" "Sonstiges"]</label>
<label>[textarea your-message placeholder "Deine Nachricht"] </label>
<center>[submit "Nachricht senden"]</center>
Why is it not accepting my "width: 100%!important;"? What can I do to make it accept that?
Thank you for your help!
Having applied styling to my form certain elements of the form aren't adhering to the styling particularly:
1st issue: The width of 350px is only being applied on one of the five input elements i.e. the email field.
2nd issue: I'm applying an image on the input elements when engaged to indicate they are required but the image isnt appearing on any of the input elements when engaged.
3rd issue: I would like the div with the class social_sign_in to have a margin top which I have applied but isn't working.
4th issue: I'm attempting to have the form styling i.e. the class I call form_input_div to wrap itself round the form elements which are 350px in width whilst it remains in the centre. This seems not to be working.
As am slightly new to CSS I suspect I might have made some errors in the basics of styling so my apologies if that is the case.
EDIT: Here's the relevant HTML code:
<div class="page_content_main_div">
<div class="page_content_heading_div" >
<p> Log in with: </p>
</div>
<div class="social_sign_in_div">
<a class="btn-auth btn-facebook large" href="#">Log in with <b>Facebook</b></a>
</div>
<div class="social_sign_in_div">
<a class="btn-auth btn-google large" href="#">Log in with <b>Google</b></a>
</div>
<div class="btn_log_in_with_email_div">
<a class="btn-auth btn_log_in_with_email large" href="#">Log in with <b>ABCD details</b></a>
</div>
<hr class="hr"></hr>
<form action="#" method="GET" class="sign_up_form">
<div class="page_content_heading_div">
<p>Sign up:</p>
</div>
<div>
<input title="Enter first name" class="firstname" name="firstname" type="text" required placeholder="Enter first name">
</div>
<div>
<input title="Enter second name" class="secondname" name="secondname" type="text" required placeholder="Enter second name">
</div>
<div>
<input title="Enter your e-mail" class="email" name="email" type="email" required placeholder="Enter email">
</div>
<div>
<input title="Enter a password" class="password" name="password" type="password" required placeholder="Enter password">
</div>
<div>
<input title="Re-enter password" class="reenterpassword" name="reenterpassword" type="password" required placeholder="Re-enter password">
</div>
<div class="form_button_internal_div">
<button title="Type your second name" type="submit" class="btn_sign_up">Sign Up</button>
</div>
<div class="form_terms_of_service_internal_div">
<p class="terms_of_service">By signing up, I agree to the ABCD <b>Terms of Service</b> and <b>Privacy Policy</b>.</p>
</div>
</form>
</div>
EDIT: Here's the relevant CSS code:
/* Page content heading div */
.page_content_heading_div {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
color: #999999;
font-size: 40px;
font-weight: bold;
clear: both;
}
/* Page content main div */
.page_content_main_div {
clear: both;
}
/* Social sign in div */
.social_sign_in_div {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
margin-top: 10px;
}
/* Log in with email div */
.btn_log_in_with_email_div {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
margin-top: 10px;
}
/* hr styling */
.hr {
width: 350px;
height: 2px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
/* */
.sign_up_form {
width: 350px;
display: inline-block;
}
/* */
input[type="text"], input[type="password"], input[type="email"] {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
width: 100%;
height: 45px;
font-size: 20px;
color: #000000;
border: 1px solid #999999;
border-radius: 6px;
padding: 5px 5px 5px 5px;
margin-top: 10px;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
/* */
input:focus {
outline: solid #999999;
border-radius: 6px;
}
/* */
.form_button_internal_div {
margin-top: 10px;
margin-bottom: 10px;
}
/* Primary button */
.btn_sign_up {
right: 0px;
width: 150px;
height: 36px;
border:none;
font-weight: normal;
font-size: 20px;
margin-top: 10px;
background: #CCC;
background: -webkit-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: -moz-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: -ms-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: -o-linear-gradient(#A2E55A 0%,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
-pie-background: linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
-moz-box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
color: #F5F5F5;
}
/* */
.btn_sign_up:hover {
background: -webkit-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -moz-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -ms-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -o-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
-pie-background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
}
/* */
.btn_sign_up:active {
background: -webkit-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -moz-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -ms-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -o-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
-pie-background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
}
/* */
.form_terms_of_service_internal_div {
margin-top: 10px;
margin-bottom: 10px;
}
/* */
.terms_of_service {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
font-size: 15px;
color: #999999;
}
The width of 350px is only being applied on one of the five input elements i.e. the email field.
This doesn't seem to be true...I'm seeing all inputs the same length.
I'm applying an image on the input elements when engaged to indicate they are required but the image isnt appearing on any of the input elements when engaged.
Your engaged inputs are identified by the class required, but they all have this class by default, so there really isn't a trigger. What you are looking for is a :focus, then apply the styling.
I would like the div with the class social_sign_in to have a margin top which I have applied but isn't working.
It's working, but 10px is not enough to see a difference. If you made this like 50px, you will see it moved.
I'm attempting to have the form styling i.e. the class I call form_input_div to wrap itself round the form elements which are 350px in width whilst it remains in the centre. This seems not to be working.
What purpose does the form_input_div serve? Why not remove the widths from the input, have them take 100% of their container, which is the form, and set the width on the form with some padding and you'll get what you want.
Also, required id is not a valid attribute to be putting on the input tags.
I want to write CSS and HTML to made this input forum from a psd file
I have few questions to ask:
First of all I cutted the background (without the other graphic elements). The header is simple to style. With the input text I found difficult: I would that when an user click over the rectangle, the text and the icon disappear.
this is my css code:
input{
background: url('input-bg.png') no-repeat;
border: none;
width: 303px;
height: 36px;
}
#username{
background: url('user-icon.png') no-repeat left;
}
#password{
background: url('password-icon.png') no-repeat left;
}
where input-bg.png is the following image:
<div id="form-login"><img id="member-icon" src="member-icon.png" />
<h2>Member login</h2>
<ul>
<li><input type="text" id="username" placeholder="User Name"/></li>
<li><input type="password" id="password" placeholder="Password" /></li>
</ul>
</div>
The problem is that the small icons are not showed because the background define of the input text overwite they. There is a simple way so solve this?
There is a simple way to reproduce also the glow effect on the right? i thought about put the effect with a value of the z-index highter than the other elements, but obviously there is a problem if you click over the button or the inputtext in the right of the form. Any suggestion?
I was thinking if its actually possible to make this form in CSS widthgradient, so I gave it a try.
Here's the result: Demo
Its not exactly like the form in picture, byt hey! I am no web designer.
And with some improvements from some CSS genius, you can make it look exactly like the one in picture.
Replace ? icon with the one you want.
HTML
<div class="container"> <!-- Unnecessary tag -->
<div class="form">
<div class="header">
Member Login
</div>
<div class="body">
<form>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<input id="rememberme" type="checkbox">
<label for="rememberme">Remember</label>
<input type="submit" value="Login Now">
</form>
</div>
</div>
</div>
CSS
body {
font-family: helvetica, sans-serif;
}
#font-face {
font-family: 'icons';
src: url('icons.ttf') format('truetype');
}
div, input {
box-sizing: border-box;
}
.container {
width: 500px;
height: 350px;
padding: 35px 0;
background: -webkit-linear-gradient(left, #C2DD9A, #F5FBF0 50%, #C2DD9A);
}
.form {
width: 365px; height: 274px;
margin: auto;
background: rgba(0,0,0,.23);
padding: 2px;
}
.header {
height: 44px;
line-height: 44px;
padding-left: 30px;
font-size: 20px;
background: url('http://i.imgur.com/s0O9hy0.png') 325px center no-repeat, -webkit-linear-gradient(top, rgb(253,253,253), rgb(198,203,199));
}
form {
margin: 0 31px;
}
input[type=text], input[type=password] {
display: block;
width: 100%;
height: 38px;
padding-left: 38px;
background: url('http://i.imgur.com/s0O9hy0.png') 10px center no-repeat, -webkit-linear-gradient(45deg, #404040 0%, #404040 60%, #535353 60%, #494949);
color: #AAA;
border: 1px solid black;
transition: box-shadow .3s;
}
input[type=text]:focus, input[type=password]:focus {
outline: 0;
box-shadow: inset 0 0 8px rgba(226,239,207,.7);
}
input[type=text] { margin-top: 36px; margin-bottom: 26px; }
input[type=password] { margin-bottom: 36px; margin-top: 26px; }
input[type=checkbox] {
-webkit-appearance: none;
width: 11px; height: 11px;
border-radius: 10px;
background: rgba(0,0,0,.5);
margin: 0 5px;
}
input[type=checkbox]:checked {
background: -webkit-radial-gradient(center center, circle, white 0%, white 30%, rgba(0,0,0,.5) 50%);
}
input[type=checkbox] + label {
color: white;
font-size: 15px;
padding-bottom: 3px;
}
input[type=submit] {
float: right;
width: 134px; height: 31px;
border: 1px solid #B7DA7C;
background: url('http://i.imgur.com/s0O9hy0.png') 15px center no-repeat, -webkit-linear-gradient(top, #99CC4B, #73A52C);
font-weight: bold;
color: white;
text-align: right;
padding-right: 22px;
}
input[type=submit]:active {
box-shadow: inset 0 -3 5px rgba(0,0,0,.5);
background: -webkit-linear-gradient(top, #649126, #7DB731);
}
what about using a before statement?
input#username:before{
content: url('user-icon.png');
}
http://www.w3schools.com/cssref/sel_before.asp
the easiest solution would be to add both icon and glow style into input background (different for each input) and then add padding-left to input. KISS rule ;)
Cut out the shade only and make it an absolute positioned div with right: 0; (assuming parent is the form box)
Since elements under the shade box won't be clickable (You will have an rectangle to show triangle), you will have to make invisible divs OVER shade box that will focus input boxes on click.
Order of z-index would be like this:
Input boxes
Shade box
Invisible divs to send focus to input boxes on click
That's what comes first to my mind.
Hi i want to style an input submit button which has a background as given in the attached image.The back ground image was provided, but im not sure how to implement it in the submit button so instead of using that image i tried using the css 3 color gradient properties to style the button,however, i cant get the desired color output.Any help is welcome.
CSS code so far.
.button {
-moz-border-radius: 18px;
-moz-box-shadow: #fffff 0px 0px 11px;
-webkit-border-radius: 18px;
-webkit-box-shadow: #6E7849 0 0 10px;
background-color: #fefefefe;
background-image: -moz-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -ms-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -o-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -webkit-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: linear-gradient(24deg, #d8d8d8, #fefefefe);
border-radius: 18px;
border: 1px solid #888888;
box-shadow: #fffff 0px 0px 11px;
color: #000000;
display: inline-block;
font-size: 3em;
margin: auto;
padding: 4px;
text-decoration: none;
}
Use the image. Matching the gradient fully to the image is an unnecessary pain:
.button {
display:block;
width:50px; //use actual image width
height:50px; // use actual image height
background:url(../img/button.png); //image file path
}
.button:hover {
background:url(../img/button_hover.png);
}
To use an image as the input is very simple:
<input type="image"src="/images/submit.gif" />
Finally i found the way to make this button using sliding door technique.However still in jeopardy to style it in disabled state.
This link helped me alot http://www.springload.co.nz/love-the-web/dynamic-submit-buttons
css
div.submit_button {
background: transparent url('common/images/bg-submit2.png') no-repeat 0 0;
display: block;
float: left;
height: 27px; /* total height of the button */
padding-left: 15px; /* end width */
}
span.submit_button_end {
background: #fff url('common/images/bg-submit2.png') no-repeat 100% 0; /* used a sprite image */
display: block;
float: left;
font-weight: normal;
height: 27px; /* total height of the button */
}
input.submit_input {
font-size: 13px;
font-weight:bold;
background: none;
border: none;
padding: 0 0 2px 15px; /* end width */
color: #1b1d60;
cursor: pointer;
position: relative;
height: 25px;
line-height: 25px;
left: -15px;
margin-right: -15px;
padding-right: 15px;
}
input.submit_input:hover {color: #fff;}
div.submit_button:hover {background-position: 0 100%;}
div.submit_button:hover span.submit_button_end {background-position: 100% 100%;}
HTML
<div class='submit_button'>
<span class='submit_button_end'>
<input class='submit_input' type='submit' value='Submit button' tabindex='#' />
</span>
</div>