I'm trying to make one of those pretty CSS3 search boxes based on the code from this site: http://speckyboy.com/2012/02/15/how-to-build-a-stylish-css3-search-box/
Everything looks like it does in the picture on that site except for the actual search box, which instead looks like this (in both Safari and Chrome):
Any help getting the search box to look the way it should?
UPDATE: Here is the code (you can also get this at the link above):
/* Form wrapper styling */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0,0,0,.2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover{
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before { /* left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
Box-sizing is your friend:
.font-wrapper input {
...
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Related
I have a tag image built using CSS I've found around the web (because I'm not a CSS expert and am kind of flailing about). I wanted to make the tag a little bit more "chunky" and have gotten close to perfect. You'll notice the background for the tag (the darker red) does not line up with the bottom corner of the diamond shape with the hole. If I just increase the size it will then cause other mis-alignment in places. Here is my current image:
The desired result should look like this:
Here is my CSS:
.tags {
a {
color: #fff;
&:visited {
color: #fff;
}
&:hover {
color: #fff;
background-color: #e94016;
}
}
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: relative;
content: "";
cursor: pointer;
margin: 10px 25px 10px 15px;
padding: 3px 28px 3px 20px;
border: none;
-webkit-border-radius: 6px;
border-radius: 6px;
font: normal 14px/16px "Antic", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-align: center;
text-transform: uppercase;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: #b23111;
-webkit-box-shadow: 0 6px 0 0 #e94016 , 2px 6px 0 1px #e94016 ;
box-shadow: 0 6px 0 0 #e94016 , 2px 6px 0 1px #e94016 ;
}
.tags::before {
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
z-index: 1;
width: 19px;
height: 19px;
position: absolute;
content: "";
cursor: pointer;
top: 2px;
right: -4px;
border: none;
-webkit-border-radius: 5px;
border-radius: 5px;
font: normal 0/normal Arial, Helvetica, sans-serif;
color: rgba(255,255,255,0.9);
-o-text-overflow: clip;
text-overflow: clip;
background: #b23111;
-webkit-box-shadow: 0 6px 0 0 #e94016 ;
box-shadow: 0 6px 0 0 #e94016 ;
text-shadow: none;
-webkit-transform: rotateY(1deg) rotateZ(-45deg) ;
transform: rotateY(1deg) rotateZ(-45deg) ;
}
.tags::after {
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
z-index: 2;
width: 10px;
height: 10px;
position: absolute;
content: "";
cursor: pointer;
top: 7px;
right: 2px;
border: none;
-webkit-border-radius: 10px;
border-radius: 10px;
font: normal medium/normal Arial, Helvetica, sans-serif;
color: rgba(255,255,255,0.9);
-o-text-overflow: clip;
text-overflow: clip;
background: #fcfcfc;
-webkit-box-shadow: 3px 3px 0 0 #e94016 inset;
box-shadow: 3px 3px 0 0 #e94016 inset;
text-shadow: none;
}
html is:
<li class="tags">9500XL,</li>
You can use a:before for the below shadow.
Stack Snippet
.tags a {
color: #fff;
}
.tags a:hover {
color: #fff;
background-color: #e94016;
}
.tags {
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: relative;
content: "";
cursor: pointer;
margin: 10px 25px 10px 15px;
padding: 3px 28px 3px 20px;
border: none;
-webkit-border-radius: 6px;
border-radius: 6px;
font: normal 14px/16px "Antic", Helvetica, sans-serif;
color: rgba(255, 255, 255, 1);
text-align: center;
text-transform: uppercase;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: #b23111;
-webkit-box-shadow: 0 6px 0 0 #e94016;
box-shadow: 0 6px 0 0 #e94016;
}
.tags::before {
display: inline-block;
z-index: 1;
width: 18px;
height: 18px;
position: absolute;
content: "";
top: 2px;
right: -4px;
border-radius: 5px;
background: #b23211;
transform: rotate(45deg);
}
.tags a::before {
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
z-index: 2;
width: 10px;
height: 10px;
position: absolute;
content: "";
cursor: pointer;
top: 7px;
right: 2px;
border: none;
-webkit-border-radius: 10px;
border-radius: 10px;
font: normal medium/normal Arial, Helvetica, sans-serif;
color: rgba(255, 255, 255, 0.9);
-o-text-overflow: clip;
text-overflow: clip;
background: #fcfcfc;
-webkit-box-shadow: 3px 3px 0 0 #e94016 inset;
box-shadow: 3px 3px 0 0 #e94016 inset;
text-shadow: none;
}
.tags::after {
display: inline-block;
width: 18px;
height: 18px;
position: absolute;
content: "";
top: 8px;
right: -4px;
border-radius: 5px;
background: #e94017;
transform: rotate(45deg);
z-index: -1;
}
<li class="tags">9500XL,</li>
#font-face {
font-family: Droid Sans;
src: url('../fonts/DroidSans-webfont.eot');
src: local("Droid Sans"), url('../fonts/DroidSans-webfont.woff');
}
#font-face {
font-family: Jenna Sue;
src: local("Jenna Sue"), url('JennaSue-webfont.ttf');
}
#font-face {
font-family: News Cycle;
src: local("News Cycle"), url('NewsCycle-Regular.ttf');
}
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section {
display:block;
}
body {
font: normal .85em 'Droid Sans', arial, sans-serif;
background: #434434;
color: #E6EEB0;
padding-bottom: 40px;
}
p {
padding: 0 0 20px 0;
line-height: 1.5em;
}
img {
border: 0;
}
h1, h2, h3, h4, h5, h6 {
font: normal 400% 'Jenna Sue', arial, sans-serif;
color: #222;
margin: 0 0 0px 0;
padding: 20px 0 5px 0;
}
h1 {
color: #C0CB77;
}
h2 {
font: normal 220% 'Jenna Sue', arial, sans-serif;
color: #FFF;
margin: 0;
padding: 0 0 8px 0;
}
h3 {
font: normal 125% 'trebuchet ms', arial, sans-serif;
}
h4, h5, h6 {
margin: 0;
padding: 0 0 5px 0;
font: normal 110% arial, sans-serif;
color: #999;
line-height: 1.5em;
}
h5, h6 {
font: italic 95% arial, sans-serif;
color: #888;
padding-bottom: 15px;
}
h6 {
color: #362C20;
}
a, a:hover {
outline: none;
text-decoration: underline;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFF;
}
ul {
margin: 2px 0 22px 17px;
}
ul li {
list-style-type: circle;
margin: 0 0 0 0;
padding: 0 0 4px 5px;
}
ol {
margin: 8px 0 22px 20px;
}
ol li {
margin: 0 0 11px 0;
}
#main, header, #logo, nav, #site_content, footer {
margin-left: auto;
margin-right: auto;
}
#main {
width: 950px;
margin: 20px auto 0 auto;
}
header {
width: 950px;
height: 105px;
}
#logo {
width: 220px;
float: left;
height: 100px;
background: transparent;
padding: 0 0 10px 10px;
}
#logo h1 {
font: normal 400% 'Jenna Sue', arial, sans-serif;
padding: 40px 0 0 17px;
color: #FFF;
}
#logo h1 a {
color: #FFF;
text-decoration: none;
}
#logo h1 a:hover {
color: #FFF;
text-decoration: none;
}
nav {
height: 26px;
width: 720px;
margin: 1px auto 0 auto;
float: right;
padding: 35px 0 0 0;
}
#site_content {
width: 950px;
overflow: hidden;
margin: 4px auto 0 auto;
padding: 0;
background: #565747;
border-top: 0;
border-bottom: 0;
}
#sidebar_container {
float: right;
width: 450px;
padding: 0;
height: 450px;
}
#content {
text-align: justify;
width: 444px;
padding: 0 0 5px 30px;
margin: 0;
float: left;
}
#content ul {
margin: 2px 0 5px 0px;
}
#content ul li {
list-style-type: none;
background: transparent url(../images/bullet.png) no-repeat left center;
margin: 0 0 0 0;
padding: 2px 0 2px 28px;
line-height: 1.5em;
}
#blog_container h4 {
font: normal 250% 'Jenna Sue', arial, sans-serif;
margin: 0 0 15px 0;
padding: 5px 0;}
#blog_container h4.select {
width: 475px;}
.blog {
background: url(../images/calendar.png) no-repeat;
width: 54px;
height: 46px;
float: left;
margin: 0 15px 0 0;
}
.blog h2 {
font: normal 90% arial, sans-serif;
text-shadow: none;
text-align: center;
margin: 0;
padding: 4px 0 0 0;
color: #FFF;
}
.blog h3 {
font: 130% arial, sans-serif;
text-shadow: none;
margin: -19px 0 0 0;
text-align: center;
color: #222;
}
footer {
width: 950px;
font: 109% 'Droid Sans', arial, sans-serif;
height: 75px;
padding: 17px 0 5px 0;
text-align: center;
background: #6F7640;
}
footer p {
padding: 0 0 10px 0;
}
footer a, footer a:hover {
color: #E6EEB0;
text-decoration: none;
}
footer a:hover {
color: #E6EEB0;
text-decoration: underline;
}
/* form styling */
.form_settings {
margin: 0;
}
.form_settings p {
padding: 0 0 10px 0;
}
.form_settings span {
padding: 5px 0;
float: left;
width: 170px;
text-align: left;
}
.form_settings input, .form_settings textarea {
padding: 4px;
width: 252px;
font: 100% arial, sans-serif;
border: 0;
border-bottom: 1px solid #C0CB77;
background: transparent;
color: #E6EEB0;
}
.form_settings .submit {
font: 140% 'News Cycle', arial, sans-serif;
border: 0;
width: 100px;
margin: 0 0 0 162px;
height: 30px;
padding: 0 0 6px 0;
cursor: pointer;
border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
background: #6F7640;
color: #FFF;
line-height: 15px;
}
.form_settings textarea, .form_settings select {
font: 100% 'Droid Sans', arial, sans-serif;
border: 1px solid #C0CB77;
border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
width: 250px;
overflow: auto;
}
.form_settings select {
width: 304px;
}
.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;
}
ul.images {
width:450px;
height:450px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
}
ul.images li {
position:absolute;
margin:0;
padding:0;
left:0;
right:0;
list-style:none;
}
ul.images li.show {
z-index:500;
}
ul img {
border:none;
}
/* from here: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers */
.lavaLampWithImage {
position: relative;
height: 25px;
padding: 10px 5px 15px 0;
margin: 10px 0 0 0;
overflow: hidden;
float: right;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: #63604F;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border: 15px 15px 15px 15px;
height: 28px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li a {
font: 109% 'Droid Sans', arial, sans-serif;
text-decoration: none;
color: #FFF;
outline: none;
text-align: center;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
padding: 6px 9px 0 9px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
border: none;
}
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 466px;
}
.curlycontainer .innerdiv{
background: transparent url(images/brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
a.css3dbutton {
background: darkred; /* background color of button */
color: white;
text-decoration: none;
font: bold 28px Arial; /* font size and style */
position: relative;
top: 0; /* anchor main button's position */
bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */
margin-bottom: 12px;
-moz-box-shadow: 0 -15px 5px darkred inset;
-webkit-box-shadow: 0 -15px 5px darkred inset;
box-shadow: 0 -15px 5px darkred inset;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.css3dbutton, a.css3dbutton:after {
display: inline-block;
padding: 10px 15px; /* vertical and horizontal padding of button */
-moz-border-radius: 8px/15px;
-webkit-border-radius: 8px/15px;
border-radius: 8px/15px;
outline: none;
}
a.css3dbutton:after { /* pseudo element to construct 3D side of button */
content: "";
position: absolute;
padding: 0;
z-index: -1;
bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */
left: 0;
width: 100%;
height: 100%;
background: #6e0e0c; /* background color of 3D effect */
-moz-box-shadow: 1px 0 3px gray;
-webkit-box-shadow: 1px 0 3px gray;
box-shadow: 1px 0 3px gray;
}
a.css3dbutton:hover {
-moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
-webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
background: #bc3835; /* background color when mouse rolls over button */
}
a.css3dbutton:active {
top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
bottom: 0;
-moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
-webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}
a.button{
background: #ECECEC;
border-radius: 15px;
padding: 10px 20px;
display: block;
font-family: arial;
font-weight: bold;
color:#7f7f7f;
text-decoration: none;
text-shadow:0px 1px 0px #fff;
border:1px solid #a7a7a7;
width: 145px;
margin:0px auto;
margin-top:100px;
box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
-webkit-transition:box-shadow 0.5s;
}
a.button i{
float: right;
margin-top: 2px;
}
a.button:hover{
box-shadow: 0px 2px 1px white inset, 0px -2px 20px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
}
a.button:active{
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5) inset, 0px -2px 20px white, 0px 1px 5px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
background:-webkit-linear-gradient(top, #d1d1d1 0%,#ECECEC 100%);
}
hr{
border: 0; border-bottom: 1px dashed #ccc; background: #999;
}
.styled-button-8 {
background: #25A6E1;
background: -moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
background: -webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: linear-gradient(top,#25A6E1 0%,#188BC0 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
padding:8px 13px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:17px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #1A87B9
}
.display_img{
float: right;
}
This is my code where I print content.
<?php
echo"<div id=\"content\">";
echo"</div>";
?>
I'd like to add profile picture in a empty place (as seen in the picture) ,but how to move it to the right?
Here is a css of div content.
EDIT:
I want to move picture to right side (Shown in a picture where to)
Move right side
Give your image a class or id, and float it to right. This way it should move to the right of the div in which it is included. For example, give it a class named display_img and float it to right, like this:
.display_img{
float: right;
}
Another trick can be the following:
.display_img{
margin-right: 0;
/*you can keep the float here if you want, but it will not affect the results adversely if removed*/
}
Use float:right; for your profile picture.And float:left; for the rest of the content in your div.Instead of using float:left; as an overall for all your content in the div.
Not sure, If I get your point correctly, but you can try something like this:
<span>Skelbimas</span>
<table border="1">
<tr>
<td>Miestas</td>
<td rowspan="5">Insert Picture</td>
</tr>
<tr>
<td>Vardas</td>
</tr>
<tr>
<td>Telefono</td>
</tr>
<tr>
<td>El Pastas</td>
</tr>
<tr>
<td>Arnzius </td>
</tr>
</table>
I have been created simple search form, using by google.
Here is my jsfiddle link: http://jsfiddle.net/njs6d489/
In that, search icon right side right?
But i need icon looking left side and placeholder also need to place left side.
I explained in this image http://s22.postimg.org/ype712rcx/Untitled_1.png
May i know, how can i do this. Is there possible to do this?
Thanks in advance.
body {
background: #fff;
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* Demo 2 */
#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}
Are you expecting like this: Demo
Updated Demo
I changed the search icon's background position at Normal state as 50% and on focus as 90%.
Here I included only the css which I changed.
CSS:
input[type=search] {
background: #ededed url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 50% center;
float:right;
}
input[type=search]:focus {
background: #ededed url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 90% center;
}
I'm using this precoded css3 search box but it isn't working for me.
The CSS:
.cf:before, .cf:after{
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
/* Form wrapper styling */
.form-wrapper {
width: 450px;
padding: 15px;
margin:50px auto;
background:rgb(7,131,71);
background: rgba(0,0,0,.2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: rgb(7,131,71);
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: rgb(7,131,71);
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: rgb(7,131,71);
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: rgb(7,131,71);
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover{
background: #3A423B;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: rgb(7,131,71);
outline: 0;
}
.form-wrapper button:before { /* left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent rgb(7,131,71) transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #3A423B;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
border-right-color: rgb(7,131,71);
}
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
The HTML:
<form class="form-wrapper cf">
<form method="get" action="https://encrypted.google.com/search" target="_top">
<input type="text" name="q" placeholder="Search here..." required>
<button type="submit">Charge!</button>
</form>
Everything seems to work fine except when I click "Charge!" (the submit button). Nothing happens. It doesn't search through google like it's supposed to. Help?
You have two form tags. You need to close your input tag. I don't know what required is for, but this works:
http://jsfiddle.net/t743qqxo/
<form class="form-wrapper cf" method="get" action="https://encrypted.google.com/search" target="_top">
<input type="text" name="q" placeholder="Search here..." required />
<button type="submit">Charge!</button>
</form>
I have some CSS that works well in Chrome, FireFox, and IE, but looks very strange in Opera.
Link to the fiddle
Also, I took screenshots:
This what happens on just forgot link hover:
This happens on form focus (complete disaster):
Normal look in Chrome:
Submit button on focus loses it's border color (why in hell?!)
Some mess on focus, I can't explain, just take a look on second pic
I tested on the latest version of Opera. What the hell is wrong with this browser? Even IE8 shows everything as I expect it.
CSS:
.sign_in {
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -255px;
background: #ffffff;
width: 510px ;
height: 240px;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
z-index: 9999999;
font-size: 14px;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}
.signs_form{
border-right-style: solid;
border-color: rgba(80, 140, 255, 0.83);
border-width: 1px;
margin-top: 40px;
vertical-align: 100%;
margin-left: 50px;
padding-right: 50px;
font-weight: 500;
display: inline-block;
}
input#email{
border-style: solid;
border-color: #378de5;
border-width: 1px;
padding: 3px 3px 3px 3px;
font-size: 14px;
outline: none;
font-style: normal;
font-weight: 400;
}
input#email:focus{
border-color: rgba(2, 22, 222, 0.97);
}
input#password{
border-style: solid;
border-color: #378de5;
border-width: 1px;
padding: 3px 3px 3px 3px;
font-size: 14px;
outline: none;
font-style: normal;
font-weight: 400;
}
input#password:focus{
border-color: rgba(2, 22, 222, 0.97);
}
.sign_in_submit {
margin-top: 0;
border: solid 1px #378de5;;
background-color: #ffffff;
color: #378de5;
padding: 2px 5px 2px 5px ;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 16px;
font-weight: 500;
}
.sign_in_submit:hover {
cursor: pointer;
border-color: rgba(2, 22, 222, 0.97);
color: rgba(2, 22, 222, 0.97);
}
#close {
float: right;
padding-left:-10px;
padding-top: -10px;
margin-right: 5px;
}
#close_sign_in_popup {
text-decoration: none;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 20px;
color: #d61354;
}
#close_sign_in_popup:hover {
color: #fc145f;
}
.forgot_pass{
display: block;
margin-top: 5px;
margin-bottom: 0;
margin-left: 2px;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
color: #378de5;
font-size: 13px;
font-weight: 400;
text-decoration: none;
}
.forgot_pass:hover{
height: 100%;
text-decoration: underline;
}
Forked http://jsfiddle.net/w29WQ/1/
.sign_in {
/*top: 50%; // so it seems the positioning gets all funky in opera
left: 50%;*/
margin-top: 0;
margin-left: 0;
/* Your other styles for this element */
}
Anyhow, seems your fixed positioning was causing errors, I simply commented out the top and left positioning in the containing div, and reset the margins to keep the element displayed.
Ok, guys.
1) Shifts in form
The reason is that Opera strongly dislikes inline-block as form property, which is quite logical, actually, but all other browser undertand this and it is convinient
2) Loosing border-color of submit button on field focus
But here - Opera bug, can be fixed by placing before real tag invisible copy - so it is like bait to this Opera bug.