I have been working on the google's costume search feature for the past two days,And frankly,I am completely lost!
I have a search-box which is styled the way that matches my websites looks,and now I want to deploy google's costume search on it AND I want the search result to appear in a different page(e.g searchresult.aspx) and I want the result to be in a <div> in my page(I want to position the div I am talking about)
let me show you my codes:
//this is my form:
<form id="searchBox" action="/" dir="rtl">
<input type="text" name="search" placeholder="search...." />
</form>
//this is the css:
#searchBox
{
position: absolute;
right: 760px;
top: 15px;
}
#searchBox input[type="text"]
{
background: url(../PNGs/sbDark.png) no-repeat 10px 10px #444;
border: 0 none;
font-family: bkoodak;
font-size: large;
font-weight: bold;
padding-right: 15px;
color: #d7d7d7;
width: 150px;
height: 30px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.2s ease ;
-o-transition: all 0.2s ease ;
transition: all 0.2s ease ;
}
#searchBox input[type="text"]:focus
{
outline: none;
background: url(../PNGs/sbWhite.png) no-repeat 10px 10px #fcfcfc;
padding-right: 15px;
color: #333333;
width: 200px;
height: 30px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
//I want the result page to be something like this:
<body>
<!-- other parts of the page-->
<div id=searchresult>
<!-- this is where I want the search result to appear-->
</div>
<!--other parts of the page-->
</body>
So far,I made a test costume search on google,chose the result-only layout(because it said I can make my own search box for it AND I can put the results in a different page),and added some color to it using the control panel provided.But the generated code was no different than the code of the default layout.And now I don't know how can I use it
I did look here and there in some blogs for something,But none of them were the thing I wanted!For example I have found this code:
<form id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown">
<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/>
<input value="FORID:11" name="cof" type="hidden"/>
<input id="q" style="width:150px;" name="q" size="70" type="text" />
<input value="Search" name="sa" type="submit"/>
</form>
where xxxxxxxxx:yyyyyyyy is my search id.So I just created a form like above(and didn't included the script from google),but it just wouldn't show me anything
Long story short,I want something like css-tricks.com 's work!
Ok I finally figured it out.With result only layout selected,I could enter my own search parameter(the default value is q)
then in my search box I entered:
<form id="searchBox" action="search_result.aspx" dir="rtl">
<input type="text" name="q" placeholder="search...." />
and then,in my result page, I pasted the google's generated script in the div I wanted,like this:
<body>
<!-- other parts of the page-->
<div id=searchresult>
<!-- google's script-->
</div>
<!--other parts of the page-->
</body>
Related
So I'm totally new to HTML/CSS. I'm designing a fun project now to learn web development.
I created a search bar and wanted to add the famous round corners with border-radius. So far it works good. The problem is that the white background shines through the edges now, since the search bar is located in the menu bar.
I will post a screenshot and the code below. I'm not 100% familiar with the CSS box-model. I guess there lies the problem. Maybe I can fill the void with my menu background image? Hope someone can guide me where to fix this problem.
Screenshot:
https://picload.org/view/prwpirg/bildschirmfoto2015-09-20um16.3.png.html
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>facefuck</title>
<link rel="stylesheet" href="./css/style.css" type="text/css"/>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="headerMenu">
<div id="wrapper">
<div class="logo">
<img src="./img/face_logo.jpg" />
</div>
<div class="search_box">
<form action="search.php" method="GET" id="search">
<input type="text" name="q" size="60" placeholder="Put your dick here" />
</form>
</div>
<div id="menu">
<a href="#" />Home</a>
<a href="#" />About</a>
<a href="#" />Sign Up</a>
<a href="#" />Sign In</a>
</div>
</div>
</div>
</body>
</html>
CSS Code:
* {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
background-color: #EAEDF5;
}
.headerMenu {
background-image: url("../img/menu_bg.png");
height: 60px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
#wrapper {
background-image: url("../img/menu_bg.png");
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
}
.logo {
background-image: url("../img/menu_bg.png");
width: 125px;
}
.logo img {
width: 150px;
height: 100%;
}
.search_box {
position: absolute;
top: 17px;
margin-left: 150px;
}
#search input[type="text"] {
background: url(../img/search_white.png) no-repeat 10px 6px #D8D8D8;
outline: none;
border: 0 none;
border-radius: 100px;
font: bold 12px Arial, Helvetica, Sans-serif;
width:300px;
padding: 5px 15px 5px 35px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
background: url(../img/search_black.png) no-repeat 10px 6pc #fcfcfc;
color: #6a6f75;
width: 300px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
...
It is caused by
* {
background-color: #EAEDF5;
}
This will make your .search_box and form have that background color too. You can override it by using:
.search_box, form {
background-color: transparent;
}
I'd recommend removing the first rule, though, and only apply the #EAEDF5 background color to the body instead of all elements.
To visualize this with a concrete example:
* {
background-color: gray;
}
#a {
padding: 20px;
background-color: pink;
}
#c {
padding: 10px;
background-color: white;
border-radius: 20px;
}
<div id="a">
<div id="b">
<div id="c">
Hello world!
</div>
</div>
</div>
In the above example, the * selector will target all elements (all divs and the body), thus setting the background color of every div to gray. The two divs with ids a and c will override this background color, while b does not and get the background color it should use from the * selector, so it'll have a gray background color instead of the initial value of transparent, which would've let the pink shine through.
To fix the issue, either forcing the #b div to have a transparent background works or by changing the *-selector to body, which will then only color the background color of the page instead of every single element (unless overridden).
See my recommended fix in action here:
body {
background-color: gray;
}
#a {
padding: 20px;
background-color: pink;
}
#c {
padding: 10px;
background-color: white;
border-radius: 20px;
}
<div id="a">
<div id="b">
<div id="c">
Hello world!
</div>
</div>
</div>
After I click the 'submit' or 'reset' button, the button color stays the hover color and does not return to the original "pre-clicked" button color until you click elsewhere in the page.
I essentially want the button color to change back to the original color after it is clicked. Can anyone suggest how to do this?
CSS/HTML:
.form input:focus {
background: #FFFFAD;
outline: none;
}
.buttons {
text-align: left;
}
.buttons input {
font-size: 2.5em;
font-weight: bold;
font-family: "Arial", serif;
padding: 8px 40px;
background: #4470B6;
border: 0px;
margin-left: 0px;
margin-right: 50px;
margin-top: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
box-shadow: 0 0 4px rgba(0, 0, 0, .75);
color: #FFFAFA;
}
.buttons input:hover,
.buttons input:focus {
background-color: #50627E;
outline: none;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}
<!-- Details Form -->
<section class="details">
<form id="form" action="test.php" method="post" autocomplete="on" target="_blank">
<div class="form">
<label>First Name:</label>
<input type="text" name="firstname" placeholder="First Name" autofocus />
</div>
<div class="buttons">
<input type="submit" value="Search">
<input type="reset" value="Reset">
</div>
</form>
</section>
i assume you are styling your button on focus in order to get rid of the outline, so simply split the selector into 2 and on focus remove only the outline:
.form input:focus {
background: #FFFFAD;
outline: none;
}
.buttons {
text-align: left;
}
.buttons input {
font-size: 2.5em;
font-weight: bold;
font-family: "Arial", serif;
padding: 8px 40px;
background: #4470B6;
border: 0px;
margin-left: 0px;
margin-right: 50px;
margin-top: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
box-shadow: 0 0 4px rgba(0, 0, 0, .75);
color: #FFFAFA;
}
.buttons input:hover
{
background-color: #50627E;
outline: none;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}
.buttons input:focus {
outline: none;
}
<!-- Details Form -->
<section class="details">
<form id="form" action="test.php" method="post" autocomplete="on" target="_blank">
<div class="form">
<label>First Name:</label>
<input type="text" name="firstname" placeholder="First Name" autofocus />
</div>
<div class="buttons">
<input type="submit" value="Search">
<input type="reset" value="Reset">
</div>
</form>
</section>
You are very close to the solution. In order to achieve the effect you are looking for try using focus and active instead of hover and focus.
The active state is only triggered when the element is being clicked.
Here is what I did
.buttons input:focus {
outline: none
}
.buttons input:active {
border: 0;
background-color: #50627E;
outline: none;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}
You can check the full solution bellow:
.form input:focus {
background: #FFFFAD;
outline: none;
}
.buttons {
text-align: left;
}
.buttons input {
font-size: 2.5em;
font-weight: bold;
font-family: "Arial", serif;
padding: 8px 40px;
background: #4470B6;
border: 0px;
margin-left: 0px;
margin-right: 50px;
margin-top: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
box-shadow: 0 0 4px rgba(0, 0, 0, .75);
color: #FFFAFA;
}
.buttons input:focus {
outline: none
}
.buttons input:active {
border: 0;
background-color: #50627E;
outline: none;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}
<!-- Details Form -->
<section class="details">
<form id="form" action="test.php" method="post" autocomplete="on" target="_blank">
<div class="form">
<label>First Name:</label>
<input type="text" name="firstname" placeholder="First Name" autofocus />
</div>
<div class="buttons">
<input type="submit" value="Search">
<input type="reset" value="Reset">
</div>
</form>
</section>
As i had same issue BUT on mobile. Mobile has thing called sticky hover. ended up # media(hover: hover) styles.
REFERENCED TEXT:
You could for example, define your normal :hover styles inside the media query (#media hover:hover{}) to restrict them to devices that support :hover fully (ones equip with a mouse or certain pointing devices):
#media (hover:hover) {
nav a:hover{
background: yellow;
}
}
or for a more progressive approach that leaves your original :hover styles untouched, target devices that don't support :hover completely:
#media (hover:none), (hover:on-demand) {
nav a:hover{ /* suppress hover effect on devices that don't support hover fully
background: none;
}
}
Reference: http://javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml
and this: How to prevent sticky hover effects for buttons on touch devices
that's because :hover and :focus background color are same
So i added background color for :hover only and no background color for :focus
if you wish you can just remove this class form css .buttons input:focus
.form input:focus {
background: #FFFFAD;
outline: none;
}
.buttons {
text-align: left;
}
.buttons input {
font-size: 2.5em;
font-weight: bold;
font-family: "Arial", serif;
padding: 8px 40px;
background: #4470B6;
border: 0px;
margin-left: 0px;
margin-right: 50px;
margin-top: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
box-shadow: 0 0 4px rgba(0, 0, 0, .75);
color: #FFFAFA;
}
.buttons input:hover,
.buttons input:focus {
outline: none;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}
.buttons input:hover{
background-color: #50627E;}
<!-- Details Form -->
<section class="details">
<form id="form" action="test.php" method="post" autocomplete="on" target="_blank">
<div class="form">
<label>First Name:</label>
<input type="text" name="firstname" placeholder="First Name" autofocus />
</div>
<div class="buttons">
<input type="submit" value="Search">
<input type="reset" value="Reset">
</div>
</form>
</section>
I found this example since this style in good so i inserted in my project
following example is search box in html & css
ERROR only in chrome, safari
works good in firefox
when i click(focus) on search box it works as styled but a blue border line appear when clicked i don't want the blue border when i click on input box i tried remove shadow still no success
.wrap{position: absolute;
text-align: center;
top: 50%;
-webkit-transform: translate(0%,-50%);
-moz-transform: translate(0%,-50%);
transform: translate(0%,-50%);}
.se {
margin-left:50px;
}
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
background: url(search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 200px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.5) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
<div class="wrap se">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</div>
set outline: none on the input to remove chrome's input highlighting
#search input[type="text"]{
outline: none;
}
FIDDLE
I´m trying to put an icon font inside my search input at the right side.
I´m putting the icon font <i class="fa fa-search-plus"></i> inside my <button> tag, but the icon font is appearing at the right of my search input and not inside the input at right.
Somebody there can see what is happening?
My jsfiddle with the problem:
http://jsfiddle.net/ritz/ZNb5r/ (I try to link the "font-awesome.min.css" into the jsfiddle but I think its not working)
My html:
<li style="float:right; list-style:none; height:20px;">
<form id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
<button type="submit"><i class="fa fa-search-plus"></i></button>
</form>
</li>
My css:
#search
{
margin-top:8x;
margin-top:8px;
outline:none ;
border:none ;
}
#search input[type="text"]
{
border: 0 none;
font: 12px 'verdana';
background: brown;
text-indent: 0;
width:110px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus
{
background: #141d22;
color: #fff;
width: 170px;
outline:none;
color:000;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
button[type="submit"]>i:hover
{
color: #fff;
}
button[type="submit"]>i
{
background:none;
color:#ccc;
font-size:1.5em;
}
The icon will not appear inside your input, because your button is not and can not be nested inside an input.
To make your button appear inside the input, try this:
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#search input[type="text"] {
padding-right: 20px;
}
#search button[type="submit"] {
margin-left: -20px;
width: 20px;
}
</style>
You may have to tweak margins and paddings to get it to work properly. To eliminate some trouble, I've added box sizing. Why?
[By default] The width and height properties are measured including only the content, but not the border, margin, or padding.
When you use border-box, however,
The width and height properties include the padding and border, but not the margin.
(See MDN's article on box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)
You just aren't linking to the font-awesome css file correctly. Here is my fiddle with it working properly.
To make it work all I did was link it to the CDN by adding this http://www.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css to external resources.
Put some height and width in the button tag should sholve your issue. Then make an icon as background-image. You may not have to put i tag on it, see my Fiddle using an input tag and background-image as icon.
how do i make the search box in the center of the nav bar? you will see what i mean below with the image.. ill post my css code for the search box below the image ..
#advsearch {
}
#advsearch input[type="text"] {
background: url(/images/search-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial, Helvetica, Sans-serif;
color: #777;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#advsearch input[type="text"]:focus {
width: 200px;
}
thanks so much in advance :) if u want maybe we can work on my website together?
also here is a Js Fiddle just incase you need it dont mind the images not being there it should not make a diffrence
Here you need to modify some css code.
#cssmenu > ul > li > a {
color: #A0A0A0;
font-family: Verdana,'Lucida Grande';
font-size: 15px;
/*line-height: 70px;
padding: 0;*/
position: relative;
top: 7px;
transition: color 0.15s ease 0s;
}
Demo: http://jsfiddle.net/y5Fhc/8/
anchor in not needed in the li of search box and I have added a class in the li of search box to make it center of the nav bar.
css
li.search{
line-height:40px;
}
html
<li class='active search'><span>
<form method="get" action="/search" id="advsearch">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</li>
jsFiddle File