I'm trying do a few customizations to the wordpress default search form and I would like to replace the text "Search" in the value="Search" string with an icon.
Currently I have the following form:
<form role="search" method="get" id="searchform" class="searchform" action="//example.com/">
<div class="box">
<div class="container-1">
<input type="text" value="" name="s" id="s" placeholder="Search..." />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</div>
</form>
How can I put in the following icon instead? <i class="fa fa-search"></i>
Here is a bit of a workaround, I replaced the input with button, removed value completely
<form role="search" method="get" id="searchform" class="searchform" action="//example.com/">
<div class="box">
<div class="container-1">
<input type="text" value="" name="s" id="s" placeholder="Search..." />
<button type="submit" id="searchsubmit" />
<span class="icon"><i class="fa fa-search"></i></span>
</button>
</div>
</div>
</form>
Form seems to work just fine ..
Related
I found the code I need to embed into Google Sites to a add google search box, but I don't know how to make it larger. Can someone help me scale this up?
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="example.com">
<input autocomplete="on" class="form-control search" name="q" placeholder="Search in example.com" required="required" type="text">
<button class="button" type="submit">Search</button>
</form>
You could only add the font-size property in CSS
.form-control.search {
font-size: 40px;
}
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="example.com">
<input autocomplete="on" class="form-control search" name="q" placeholder="Search in example.com" required="required" type="text">
<button class="button" type="submit">Search</button>
</form>
or you can set a width and height
.form-control.search {
width: 80vw;
height: 50px;
}
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="example.com">
<input autocomplete="on" class="form-control search" name="q" placeholder="Search in example.com" required="required" type="text">
<button class="button" type="submit">Search</button>
</form>
Obviously you can have a combination of both depending on what/how you want to make it larger.
I cannot seem to make the search button and input box be aligned on the same line...currently the textbox is above the search button...any tips?
<!-- Search Bar -->
<div class="headline headline-md"><h2>Search</h2></div>
<div class="input-group margin-bottom-40">
<form method="get" action="#Url.ArticulateSearchUrl(Model)">
<input type="text" name="term" class="form-control" placeholder="Search">
<span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>
</div>
<!-- End Search Bar -->
The problem is that the <div>s the <h2> and the <form> are display:block and fill the width of their container
You can convert your HTML to
<div class="headline headline-md"><h2>Search</h2></div>
<form method="get" action="#Url.ArticulateSearchUrl(Model)">
<input type="text" name="term" class="form-control" placeholder="Search">
<span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>
and add this CSS
.headline-md,h2,form{
display:inline-block;
}
.headline-md{
width:80px;
margin-right:15px;
}
I added !important to force the new CSS rules. I added a code snippet to demonstrate the code.
.headline-md,h2,form{
display:inline-block !important;
}
.headline-md{
width:80px !important;
margin-right:15px !important;
}
<div class="headline headline-md"><h2>Search</h2></div>
<form method="get" action="#Url.ArticulateSearchUrl(Model)">
<input type="text" name="term" class="form-control" placeholder="Search">
<span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>
I figured it out. This did the trick:
<!-- Search Bar -->
<div class="headline headline-md"><h2>Search</h2></div>
<div class="input-group margin-bottom-40">
<form class="input-group" method="get" action="#Url.ArticulateSearchUrl(Model)">
<div class="input-group-btn">
<input type="text" name="term" class="form-control" placeholder="Search">
<span><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</div>
</form>
</div>
<!-- End Search Bar -->
i have a problem when my view render, i am using a input group class to join a textbox and a input but the problem is that if you see they doesn't get together, i already find a solution that is to erase part of the 'site.css' mvc project make from default but that doesn't work for me.
here is my code.
#using (Html.BeginForm())
{
<div class="input-group">
<span class="input-group-btn">
<input type="submit" value="Filter" class="btn btn-default" />
</span>
Product name: #Html.TextBox("id", null, new {#class = "form-control"})
</div>
}
and its views like this
Try changing the width of the div.
UPDATE:
I am confused on why your TextBox and Label(Product Name) are below the span.
Here is a working example with add-ons on both sides:
<div class="form-group">
<label class="control-label">Input addons</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Button</button>
</span>
</div>
</div>
Your problem is that "Product name:" falls inside the input-group but isn't in a input group compatible tag. Here is a plunker with some options. enter link description here
<form action="/Products/Index" method="post">
<div class="input-group">
<span class="input-group-addon"> Product name:</span>
<input class="form-control" id="id" name="id" type="text" value="" />
<span class="input-group-btn">
<input type="submit" value="Filter" class="btn btn-default" />
</span>
</div>
</form>
<form action="/Products/Index" method="post">
<label>Product name:</label>
<div class="input-group">
<input class="form-control" id="id" name="id" type="text" value="" />
<span class="input-group-btn">
<input type="submit" value="Filter" class="btn btn-default" />
</span>
</div>
</form>
I have a problem in Firefox with the size of a search form when screen have 768px or low, it does not fix the width of the form. Chrome does it good.
The css is the standard Bootstrap 3 files, but firefox opens bootstrap.css:null wihle chrome opens navbar.less and utilities.less
Here is the code:
<div class="pull-right">
<form class="navbar-form navbar-search" action="/portal/index.php/es/" method="post" role="search">
<div class="input-group">
<input name="searchword" id="mod-search-searchword" maxlength="200" class="form-control" type="search" size="20" placeholder="Buscar...">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
<input type="hidden" name="task" value="search">
<input type="hidden" name="option" value="com_search">
<input type="hidden" name="Itemid" value="102">
</form>
</div>
Your use of pull-right on the initial element is causing the problem. Replacing this with text-right will acheive the same effect (ie. Search box aligned to the right) but columns will work as expected...
DEMO
<div class="text-right">
<form class="navbar-form navbar-search" action="/portal/index.php/es/" method="post" role="search">
...
</form>
</div>
I am trying to add this simple search form while applying form inline class so that controls appear next to each other, but I get the controls displayed above each other and the search bottom in white and looking strange, so can someone please tell me what I am missing here?
<div class="container">
<div class="row">
<div class="col-md-8">
<form class="form-inline" action="#" method="post">
Search<input type="text" id="search" name="search" class="input-small" placeholder="Search...">
<select id="searchon" name="searchon">
<option value="0">First Name</option>
<option value="1">Last Name</option>
</select>
<button type="submit" class="btn">Search</button>
</form>
</div>
</div>
</div>
From Bootstrap reference, for inline forms :
This only applies to forms within viewports that are at least 768px
wide.
and as far as your layout is concerned,
<div class="container">
<div class="row">
<div class="col-md-8">
<form class="form-inline" action="#" method="post">
Search<input type="text" id="search" name="search" class="input-small" placeholder="Search...">
<select id="searchon" name="searchon">
<option value="0">First Name</option>
<option value="1">Last Name</option>
</select>
<button type="submit" class="btn">Search</button>
</form>
</div>
</div>
</div>
its perfectly fine..inline :
working demo
I had similar issue with form-inline. For me input-group within form-inline worked to keep following input and button in a row next to each other instead of one on top of the other.
<form class="form-inline">
<div class="input-group">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</div>
</form>
I had a similar issue with a code snippet from bootstrap. I found that the 2 classes 'control-group' and 'controls' broke the inline. removing the 2 classes fixed it for me.
<div class="control-group">
<label class="control-label" for="Name">Name</label>
<div class="controls">
<input type="text" id="Name" placeholder="Name">
</div>
</div>
to:
<label class="control-label" for="Name">Name</label>
<input type="text" id="Name" placeholder="Name">
Yes! removing the second class from the div worked for me.
<form class="form-inline name=" search">
<fieldset>
<div class="form-group">
<input name="rego" id="search_box" style="text-transform:uppercase" maxlength="6" type="text" class="form-control input-md" placeholder="PLATE NO">
<input class="btn btn-lg btn-primary" type="submit" value=" Programe Tag " />
</div>
</fieldset>
to
<form class="form-inline name=" search">
<fieldset>
<input name="rego" id="search_box" style="text-transform:uppercase" maxlength="6" type="text" class="form-control input-md" placeholder="PLATE NO">
<input class="btn btn-lg btn-primary" type="submit" value=" Programe Tag " />
</fieldset>