How to make below style:


Tags: html,css,html5

Problem :

I'd like to achieve something like this:

enter image description here

I've done this so far:

enter image description here

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.



Solution :

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


    CSS Howto..

    How to conditionally load CSS and extend it using SASS/SCSS

    How to override CSS code with a new class?

    How to find the css class of an anchor link inside a cross domain iFrame?

    How to know if an element is rendered?

    How to apply style rules that are tied to a model in AngularJS?

    How to make span in bootstrap nav have width: 0px?

    how to position heading in the center of the page

    How do I style a div with inner floats to expand horizontally to allow all inner floating divs to fit?

    How to indent list items using CSS when you have floating blocks?

    How to move one element to the right of another using CSS?

    How do browsers change font-weight if it's not present in the current font?

    How do I center these three blocks horizontally?

    How to push image (behind canvas) to front in order for its onclick function to work

    How to override the height of parent node using CSS?

    how to position element equally from left and right sides?

    How to prevent left “post” section from dropping off?

    How to edit css files using php safely?

    How to make slide down menu to slide up?

    How to correctly align left in CSS?

    How to create dashed radius border just with css?

    How to differentiate between high-res phone and desktop using css or js or anything else?

    how to add line break in HTML using jQuery

    Show an image from b&w to color as if it were loading (left to right)

    How to escape quotes in Less variable which stores a color name?

    How can I use CSS to vertically center the text in an anchor, within a LI?

    How To Adjust CSS List On Hover Image

    contenteditable does not show pseudoselector :before in safari

    How can I get a label to right align in a table “cell” (td)?

    How to get the exact RGBa value set through CSS via Javascript?

    Using CSS approach how to set an image to fill a path in SVG?