I need help for checkbox using CSS only.
First of all it function correctly. However, I want to overlay the checked image on top of the unchecked image when the button is clicked. How to achieve this?
.gchoice_1_1_3 {border: 1px solid red;}
.gchoice_1_1_3 input[type="checkbox"] {display: none; }
.gchoice_1_1_3 input[type="checkbox"] + label:before {
background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
z-index: 10;
content: "";
display: inline-block;
font-size: 12px;
height: 75px;
width: 75px;
line-height: 16px;
margin: -2px 6px 0 0;
text-align: center;
vertical-align: middle;
positionL relative;
border-radius: 10px;
background-color: #6283B2;
}
.gchoice_1_1_3 input[type="checkbox"]:checked + label:before {
background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/checkmark.png') 0 0px no-repeat;
height: 75px;
width: 75px;
border-radius: 10px;
background-color: #37924A;
}
<li class='gchoice_1_1_3'>
<input name='input_1.3' type='checkbox' value='Christmas Lights' id='choice_1_1_3' tabindex='22' />
<label for='choice_1_1_3' id='label_1_1_3'>Christmas Lights</label>
</li>
You can use multiple backgrounds.
But be sure to check browser support and problems with order in which backgrounds are applied.
.gchoice_1_1_3 {border: 1px solid red;}
.gchoice_1_1_3 input[type="checkbox"] {display: none; }
.gchoice_1_1_3 input[type="checkbox"] + label:before {
background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
z-index: 10;
content: "";
display: inline-block;
font-size: 12px;
height: 75px;
width: 75px;
line-height: 16px;
margin: -2px 6px 0 0;
text-align: center;
vertical-align: middle;
position: relative;
border-radius: 10px;
background-color: #6283B2;
}
.gchoice_1_1_3 input[type="checkbox"]:checked + label:before {
background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/checkmark.png'), url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
height: 75px;
width: 75px;
border-radius: 10px;
background-color: #37924A;
}
<li class='gchoice_1_1_3'>
<input name='input_1.3' type='checkbox' value='Christmas Lights' id='choice_1_1_3' tabindex='22' />
<label for='choice_1_1_3' id='label_1_1_3'>Christmas Lights</label>
</li>
Related
This is a followup for a solved question :
transition background of pseudo element
The idea is to add a transition to the background color which appears when we do a hover, this following code works on IE11, but without the transition:
input[type=checkbox] {
appearance: none;
}
input[type=checkbox] + label {
margin: 0;
padding: 0;
user-select: none;
}
input[type=checkbox] + label::before {
content: url("https://svgshare.com/i/Qo7.svg");
cursor: pointer;
color: transparent;
background: none;
border: none;
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
}
input[type=checkbox]:checked + label:before {
content: url("https://svgshare.com/i/Qmp.svg");
background: none;
border: none;
}
input[type=checkbox]:hover + label:before {
background: #D9DEEA;
}
<input type="checkbox" id="checkbox1"/>
<label for="checkbox1"></label>
However, this code doesn't work on IE11, since it doesn't support var:
input[type=checkbox] {
appearance: none;
}
input[type=checkbox] + label {
margin: 0;
padding: 0;
user-select: none;
}
input[type=checkbox] + label::before {
content: url("https://svgshare.com/i/Qo7.svg");
cursor: pointer;
color: transparent;
background: none;
border: none;
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(farthest-side,#D9DEEA 99%,transparent) center/ var(--s,0px 0px);
background-repeat:no-repeat;
transition:0.5s;
}
input[type=checkbox]:checked + label:before {
content: url("https://svgshare.com/i/Qmp.svg");
background: none;
border: none;
}
input[type=checkbox]:hover + label:before {
--s:100% 100%;
}
<input type="checkbox" id="checkbox1"/>
<label for="checkbox1"></label>
I have updated the code from the solution of my previous question, so it can work with IE11, but I couldn't figure out how to do a workaround for var in IE11.
Edit
Thanks to #Temani Afif answer, I managed to do the transition without the var and using checkbox with input (since pseudo element are not meant to be used on replaced elements such as form elements (inputs)):
input[type=checkbox] {
appearance: none;
}
input[type=checkbox] + label {
margin: 0;
padding: 0;
user-select: none;
}
input[type=checkbox] + label::before {
content: url("https://svgshare.com/i/Qo7.svg");
cursor: pointer;
color: transparent;
background: none;
border: none;
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(farthest-side,#D9DEEA 99%,transparent) center/ 0px 0px;
background-repeat:no-repeat;
transition:0.5s;
}
input[type=checkbox]:checked + label:before {
content: url("https://svgshare.com/i/Qmp.svg");
border: none;
}
input[type=checkbox]:hover + label:before {
background-size: 40px 40px;
}
<input type="checkbox" id="checkbox1"/>
<label for="checkbox1"></label>
But in IE11 the background just appears instantly without the transition.
No CSS variables solution
.container {
position: relative;
height: 100px;
width: 300px;
padding: 24px;
box-sizing: border-box;
color: black;
border: 2px solid black;
}
input[type="checkbox"] {
height: 40px;
width: 40px;
position: absolute;
top: 12px;
right: 12px;
appearance: none;
outline: none;
cursor: pointer;
border: none;
background:
url("https://svgshare.com/i/Qo7.svg") calc(50% + 1px) 50% /60% 60%,
radial-gradient(farthest-side,#D9DEEA 99%,transparent) center/ 0px 0px;
background-repeat:no-repeat;
transition:0.5s;
}
input[type="checkbox"]:hover {
background-size:
60% 60%,
100% 100%;
}
input[type="checkbox"]:checked {
background-image:
url("https://svgshare.com/i/Qmp.svg"),
radial-gradient(farthest-side,#D9DEEA 99%,transparent);
}
<div class="container">
<input type="checkbox" >
</div>
I'm trying to change the style of a input only if the input is focused and the sibling is hovered like so:
form#search {
display: inline-block;
position: relative;
min-width: 305px;
height: 2.500em;
width: 100%;
margin: 10px 20px;
vertical-align: middle;
}
form#search input {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
height: 100%;
width: 100%;
padding: 0.5em 5.33em 0.6em 0.33em;
margin: 0 -2px 0 0;
border: 2px solid #f2f2f2;
}
form#search input:hover,
form#search input:focus {
border: 2px solid #005785;
outline: none;
}
form#search button {
position: absolute;
right: 0px;
width: 5em;
height: 100%;
background-color: #005785;
color: #fff;
margin: 10px auto;
padding: 0.33em 1em 0.33em 1em;
outline: none;
border: none;
margin: 0;
cursor: pointer;
}
form#search button:hover,
form#search button:focus {
background-color: #003550;
}
form#search input:focus ~ button:hover ~ input:focus {
border: 2px solid #003550 !important;
}
<form id="search">
<input type="text">
<button type="submit">Search</button>
</form>
More specifically this line:
form#search input:focus ~ button:hover ~ input:focus
Anyone have any idea how to fix this? It doesn't appear to work and I have no idea as the logic seems sound.
Thanks,
Jamie
The general sibling selector (~) will only search forward in the DOM.
To achieve your desired result you would have to rearrange the order of the button and input.
Your selector would then become:
form#search button:hover ~ input:focus
Since there are only two elements, you could use the immediate sibling selector (+) instead:
form#search button:hover + input:focus
form#search {
display: inline-block;
position: relative;
min-width: 305px;
height: 2.500em;
width: 100%;
margin: 10px 20px;
vertical-align: middle;
}
form#search input {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
height: 100%;
width: 100%;
padding: 0.5em 5.33em 0.6em 0.33em;
margin: 0 -2px 0 0;
border: 2px solid #f2f2f2;
}
form#search input:hover,
form#search input:focus {
border: 2px solid #005785;
outline: none;
}
form#search button {
position: absolute;
right: 0px;
width: 5em;
height: 100%;
background-color: #005785;
color: #fff;
margin: 10px auto;
padding: 0.33em 1em 0.33em 1em;
outline: none;
border: none;
margin: 0;
cursor: pointer;
z-index: 1;
}
form#search button:hover,
form#search button:focus {
background-color: #003550;
}
form#search button:hover ~ input:focus {
border: 2px solid red !important;
}
<form id="search">
<button type="submit">Search</button>
<input type="text">
</form>
I've also added a z-index to the button to place it in front of the input.
I want to bring the dropdown chevron behind my dropdown so that when I click anywhere on my dropdown, I can see the menu. Right now the chevron-down area is unclickable.
I have looked into other options of using font awesome but have not been able to do so.
<div id="actions-dropdown" class="actions">
<select class="select-option" required [(ngModel)]='optionSelected' (ngModelChange)='onOptionsSelected($event)'>
<option class='option' *ngFor='let option of options' [value]="option">{{option}}</option>
</select>
<i id="arrow" class="fa fa-chevron-down"></i>
</div>
CSS
.select-option {
background: transparent;
background-size: auto auto;
-moz-appearance: none;
padding-top: 0px;
background-size: 20px;
color: #ffffff;
font-size: 30px;
width: 100px;
height: 40px;
border: 1px white solid;
margin: 11px 0px 0px 1071px;
z-index: 5;
}
.fa-chevron-down {
color: red;
z-index: -5;
margin: 0px 0px 0px -5px;
}
Method 2 using Font Awesome
.select-option {
border: 1px solid #ccc;
overflow: hidden;
height: 40px;
width: 240px;
position: relative;
display: block;
background:black;
}
select{
height: 40px;
padding: 5px;
border: 0;
font-size: 16px;
width: 240px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-option:after {
content:"\f078";
font-family: FontAwesome;
background: : black;
padding: 12px 8px;
position: absolute; right: 0; top: 0;
background: blue;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
change your markup like this. use label instead of i. set pointer-events: none to .fa-chevron-down
<div id="actions-dropdown" class="actions">
<select id="select-el" class="select-option" required [(ngModel)]='optionSelected' (ngModelChange)='onOptionsSelected($event)'>
<option class='option' *ngFor='let option of options' [value]="option">{{option}}</option>
</select>
<label id="arrow" for="select-el" class="fa fa-chevron-down"></label>
</div>
.select-option {
background: transparent;
background-size: auto auto;
-moz-appearance: none;
padding-top: 0px;
background-size: 20px;
color: #ffffff;
font-size: 30px;
width: 100px;
height: 40px;
border: 1px red solid;
margin: 11px 0px 0px 0;
z-index: 5;
}
.actions {
position: relative;
display: inline-block;
}
.fa-chevron-down {
color: red;
z-index: 7;
margin: 0px 0px 0px -5px;
position: absolute;
top:20px;
right:0;
pointer-events:none;
}
.select-option {
border: 1px solid #ccc;
overflow: hidden;
height: 40px;
width: 240px;
position: relative;
display: block;
background:black;
}
select{
height: 40px;
padding: 5px;
border: 0;
font-size: 16px;
width: 240px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-option:after {
content:"\f078";
font-family: FontAwesome;
background: : black;
padding: 12px 8px;
position: absolute; right: 0; top: 0;
background: blue;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div id="actions-dropdown" class="actions">
<select id="select-el" class="select-option" required>
<option class='option'>option</option>
<option class='option'>option</option>
<option class='option'>option</option>
<option class='option'>option</option>
</select>
<label for="select-el" class="fa fa-chevron-down"></label>
</div>
Case 1) z-index: -5; might be your problem.
.fa-chevron-down {
color: red;
z-index: -5;
margin: 0px 0px 0px -5px;
}
Case 2) .select-option:after not sure if this works because form elements don't have pseudo elements like :before and :after. You might need a different element, like a span to wrap the <select> element and apply :after to span.
for a form I'm creating, I used css to display radio buttons as a toggle-switch.
However its not responsive at all. When viewing on mobile the "scale" 1-5 is broken up in pieces. My goal is to change the with of the scale responsively instead of it breaking up.
Somehow I can't seem to figure it out.
Here's the code: http://jsfiddle.net/7byse1vk/
.toggle__label {
transition: all .25s ease;
display: inline-block;
border-radius: 5px;
background-color: #878787;
cursor: pointer;
padding: 0 30px;
min-width: 100px;
height: 48px;
line-height: 48px;
color: #a7a6ae;
text-align: center;
}
Many thanks in advance!
You can use display: flex; on the parent, remove the min-width from the labels (otherwise that will make them at least 160px wide each, too wide for mobile), and set them to flex-grow: 1 so they fill the parent fluidly.
body {
padding: 20px;
}
.toggle {
margin-bottom: 20px;
}
.row {
display: flex;
}
.toggle__label {
transition: all .25s ease;
border-radius: 5px;
background-color: #878787;
cursor: pointer;
padding: 0 30px;
height: 48px;
line-height: 48px;
color: #a7a6ae;
text-align: center;
flex-grow: 1;
}
.toggle__input:checked + .toggle__label {
background-color: #e5702a;
color: white;
}
.toggle__label--left {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.toggle__label--middle {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin-left: -4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.toggle__label--right {
margin-left: -4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.toggle__input {
position: absolute;
left: -99999px;
}
label {
padding: 0.4em 2em 0.4em 0;
}
.toggle-btn-grp {
margin: 3px 0;
}
.toggle-btn {
text-align: centre;
margin: 5px 2px;
padding: 0.4em 3em;
color: #000;
background-color: #FFF;
border-radius: 10px;
display: inline-block;
border: solid 1px #CCC;
cursor: pointer;
}
.toggle-btn-grp.joint-toggle .toggle-btn {
margin: 5px 0;
padding: 0.4em 2em;
border-radius: 0;
border-right-color: white;
}
.toggle-btn-grp.joint-toggle .toggle-btn:first-child {
margin-left: 2px;
border-radius: 10px 0px 0px 10px;
}
.toggle-btn-grp.joint-toggle .toggle-btn:last-child {
margin-right: 2px;
border-radius: 0px 10px 10px 0px;
border-right: solid 1px #CCC;
}
.toggle-btn:hover {
border: solid 1px #a0d5dc !important;
background: #f1fdfe;
}
.toggle-btn.success {
background: lightgreen;
border: solid 1px green !important;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/* CSS only version */
.toggle-btn-grp.cssonly * {
width: 140px;
height: 30px;
line-height: 30px;
}
.toggle-btn-grp.cssonly div {
display: inline-block;
position: relative;
margin: 5px 2px;
}
.toggle-btn-grp.cssonly div label {
position: absolute;
z-index: 0;
padding: 0;
text-align: center;
}
.toggle-btn-grp.cssonly div input {
position: absolute;
z-index: 1;
cursor: pointer;
opacity: 0;
}
.toggle-btn-grp.cssonly div:hover label {
border: solid 1px #a0d5dc !important;
background: #f1fdfe;
}
.toggle-btn-grp.cssonly div input:checked + label {
background: lightgreen;
border: solid 1px green !important;
}
<div class="row">
<input class="toggle__input" id="option-1" type="radio" name="input4" value="1">
<label class="toggle__label toggle__label--left" for="option-1">1</label>
<input checked="true" class="toggle__input" id="option-2" type="radio" name="input4" value="2">
<label class="toggle__label toggle__label--middle" for="option-2">2</label>
<input class="toggle__input" id="option-3" type="radio" name="input4" value="3">
<label class="toggle__label toggle__label--middle" for="option-3">3</label>
<input class="toggle__input" id="option-4" type="radio" name="input4" value="4">
<label class="toggle__label toggle__label--middle" for="option-4">4</label>
<input class="toggle__input" id="option-5" type="radio" name="input4" value="5">
<label class="toggle__label toggle__label--right" for="option-5">5</label>
</div>
Replace your CSS for the labels below and it'll work. This will scale them down properly. It's because at the moment they've got a minimum set width and are being stretch with the padding because they don't have box-sizing: border-box;.
.toggle__label {
transition: all .25s ease;
display: inline-block;
border-radius: 5px;
background-color: #878787;
cursor: pointer;
padding: 0 30px;
width: 20%;
height: 48px;
line-height: 48px;
color: #a7a6ae;
text-align: center;
float: left;
box-sizing: border-box;
}
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.
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
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/
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.
http://jsfiddle.net/5BwLC/22/
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?
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;
http://jsfiddle.net/gxXYC/2/
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;
}
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.