Reputation: 4842
How to make below style:
I'd like to achieve something like this:
I've done this so far:
just wondering, how to make a purple area with little arrow button and once user click it, it would invoke something.
Here is the html and css code I have:
<div class="searchy">
<input type="search" name="ttsearch" data-style="mini" data-theme="d" placeholder="Search here..." class="fdSearch" value=""/>
</div>
CSS:
.searchy{
height: 60px;
background-color: #555;
color: #FFF;
margin-left: -15px;
margin-right: -15px;
}
.fdSearch{
background-color: white;
border-radius: 10px;
border: 5px solid #E5E4E2;
margin: 2px;
margin-left: -15px;
margin-right: -15px;
height: 40px;
vertical-align: middle;
padding: 20px;
margin-top: 15px;
width: 85%;
}
===================update==========================
Thank you guys....They all works. I just pick up one for the right answer. I've learnt a lot from codes with different version of answers below. Thank you for your help again.
Upvotes: 1
Views: 273
Answers (7)
Reputation: 18462
Not sure why I'm adding my answer to the heaps, but here it is:
HTML:
<div class="searchy">
<div class="search-wrap">
<input type="search" name="ttsearch" data-style="mini" data-theme="d" placeholder="Search here..." class="fdSearch" value="" />
<button type="submit">Search</button>
</div>
</div>
CSS:
.searchy {
height: 60px;
background-color: #555;
color: #FFF;
position: relative;
padding: 0 6%;
}
.searchy:after {
content:'';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.search-wrap {
background-color: white;
border-radius: 10px;
border: 5px solid #E5E4E2;
margin: 2px;
height: 40px;
vertical-align: middle;
width: 85%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
position: relative;
display: inline-block;
}
.search-wrap > input, .search-wrap > button {
margin: 0;
height: 100%;
border: 0;
}
.search-wrap input[type="search"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
width: 100%;
}
/* Unfortunately these have to be separate: http://css-tricks.com/snippets/css/style-placeholder-text/ */
.search-wrap input[type="search"]::-webkit-input-placeholder {
font-style: italic;
}
.search-wrap input[type="search"]:-moz-placeholder {
/* Firefox 18- */
font-style: italic;
}
.search-wrap input[type="search"]::-moz-placeholder {
/* Firefox 19+ */
font-style: italic;
}
.search-wrap input[type="search"]:-ms-input-placeholder {
font-style: italic;
}
.search-wrap button[type="submit"] {
position: absolute;
top: 0;
bottom: 0;
right: 0;
background: #7c7aa9;
color: #fff;
text-transform: uppercase;
padding: 0 10px;
}
.search-wrap button[type="submit"]:before {
position: absolute;
content:'';
border: 6px solid transparent;
border-right-color: #7c7aa9;
height: 0;
top: 0;
bottom: 0;
margin: auto 0;
left: -10px;
}
Upvotes: 1
Reputation: 4370
Fiddle: http://jsfiddle.net/hBdMz/
Css:
.form-wrapper {
width: auto;
padding:4px;
background: #555;
clear:both;
display:table;
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
border: 0;
background: white;
border-radius: 3px 0 0 3px;
outline:none;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
color: black;
text-transform: uppercase;
background: #9B30FF;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:before {
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #9B30FF transparent;
top: 12px;
left: -6px;
}
Html:
<div class="form-wrapper">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</div>
Adapted from: speckyboy
Upvotes: 2
Reputation: 22643
demo: http://jsfiddle.net/gxXYC/
.searchy{
position:relative;
height: 60px;
width:480px;
background-color: #555;
color: #FFF;
}
.searchy:before, .searchy:after{
position:absolute;
top:0;
}
.searchy:before{
content:"";
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
right:100px;
top:20px;
}
.searchy:after{
content: "search";
color:white;
text-align:center;
width: 96px;
height: 84%;
top: 5px;
font-size: 23px;
line-height: 44px;
background: blue;
right: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.fdSearch{
background-color: white;
border-radius: 10px;
border: 5px solid #E5E4E2;
height: 100%;
vertical-align: middle;
padding: 20px;
width: 100%;
float:left;
}
the markup
<div class="searchy">
<input type="search" name="ttsearch" data-style="mini" data-theme="d" placeholder="Search here..." class="fdSearch" value=""/>
</div>
if you want to use a submit button the git it an absolute position right width the same dimenssion as :after and an opacity :0;
Upvotes: 1
Reputation: 6655
Check This Fiddle
HTML
<div class="searchy">
<input type="search" name="ttsearch" data-style="mini" data-theme="d" placeholder="Search here..." class="fdSearch"
value=""/>
<button type="submit">Submit</button>
</div>
CSS
.searchy {
background: grey;
padding: 50px 20px;
}
input {
border:none;
background: none;
border-top: 3px solid #e1e1e1;
border-left: 3px solid #e1e1e1;
border-bottom: 3px solid #e1e1e1;
padding: 10px 3px;
}
button {
border:none;
background: #4fd577;
padding: 9px 10px;
margin-left: -5px;
border-top: 3px solid #e1e1e1;
border-right: 3px solid #e1e1e1;
border-bottom: 3px solid #e1e1e1;
}
button { position: relative; background: #4fd577; }
button:after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
button:after { border-color: rgba(79, 213, 119, 0); border-right-color: #4fd577; border-width: 7px; top: 50%; margin-top: -7px; }
Use this tool to create css arrows :- http://cssarrowplease.com/
Upvotes: 2
Reputation: 9412
HTML
<div class="searchy">
<div class="searc">
<input type="search" name="ttsearch" data-style="mini" data-theme="d" placeholder="Search here..." class="fdSearch" value=""/>
<div class="search-button" onclick="f()">
Search
</div>
</div>
</div>
CSS
.searchy{
min-height: 60px;
background-color: #555;
color: #FFF;
margin-left: -15px;
margin-right: -15px;
overflow:hidden;
}
.fdSearch{
float:left;
background-color: white;
border-radius: 10px;
border: 5px solid #E5E4E2;
margin: 2px;
margin-left: -15px;
margin-right: -15px;
min-height: 40px;
vertical-align: middle;
padding: 20px;
margin-top: 15px;
width: 85%;
}
.searc
{
width:85%;
overflow:hidden;
}
.search-button
{
margin-top:15px;
margin-left:-40px;
min-height:40px;
width:10%;
background-color:purple;
float:left;
padding:20px;
vertical-align: middle;
border-radius: 10px;
border: 5px solid #E5E4E2;
}
Would you like the arrow too?
Upvotes: 1
Reputation: 1593
Inside your form create a division containing a division with the word SEARCH and an img with a unique class.
Position your out division to absolute, top minus the height of your textbox. Float your Search division to the right, float, your img to the left. Asign your search division a width and height.
Upvotes: 1
Reputation: 40663
There's no one 'right' answer to this. Here's how I would do it:
Make the purple box/arrow a background image of the input.
Put the search text/button in an absolutely positioned DIV positioned above the right side of the input box.
Upvotes: 0