Flex items don't show in line in Webkit browsers [duplicate] - html

Question

This question already has answers here:
Flex / Grid layouts not working on button or fieldset elements
(3 answers)
Closed 5 years ago.
I've created a text field with a little cogwheel, that offers options in a popup menu about how to treat the search string. For some parts, it uses a flexible box layout.
In Firefox, I get the expected result:
.
In Webkit browsers (Safari and Vivaldi), I get this result:
As you can see, the cogwheel doesn't stay in line. This is my main concern. I'm not too worried about the menu text not stretching as that can easily be solved with giving any of its containers a width.
I currently don't have Chrome, but I suspect it might render it in a similar fashion as the other Webkit browsers.
Here is the css that I think is relevant to my problem.
.flex-search {
position: relative;
display: -webkit-flex; // <--
display: flex; // <--
-webkit-align-items: stretch; // <--
align-items: stretch; // <--
width: 100%;
border: 1px solid #222;
border-radius: .4em;
background-color: #fff;
}
.flex-search > :first-child {
-webkit-flex: 1; // <--
flex: 1; // <--
}
.flex-search > :last-child {
width: 2em; // <--
border-left: 1px solid #ccc;
cursor: pointer;
}
And here's a full code snippet of the search field:
$( '.flex-search input[type="radio"]' ).click( function() {
$( this ).closest( 'span' )
.css( 'display', 'none' )
.delay( 500 )
.queue( function ( next ) {
$( this ).removeAttr( 'style' );
next();
} );
$( this ).closest( 'fieldset' )
.find( 'input[type="text"]' )
.attr( 'placeholder', $( this ).closest( 'label' ).text() )
.focus();
} );
* {
margin: 0;
padding: 0;
border: medium none;
border-spacing: 0;
outline: none;
outline: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: inherit;
text-decoration: none;
text-indent: 0;
list-style: none outside none;
background: none repeat scroll 0 0 transparent;
}
*::-moz-focus-inner {
border: 0;
padding: 0;
}
html {
color: #222;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
text-align: left;
height: 100%;
}
body {
font-size: 1.4rem;
line-height: 1.5em;
min-height: 100%;
background-color: #fff;
}
div {
margin: 150px auto 0;
width: 300px;
}
::-webkit-input-placeholder {
color: #666;
font-size: 85%;
}
:-moz-placeholder {
color: #666;
font-size: 85%;
}
::-moz-placeholder {
color: #666;
font-size: 85%;
}
:-ms-input-placeholder {
color: #666;
font-size: 85%;
}
:focus::-webkit-input-placeholder {
color: #ccc;
}
:focus:-moz-placeholder {
color: #ccc;
}
:focus::-moz-placeholder {
color: #ccc;
}
:focus:-ms-input-placeholder {
color: #ccc;
}
.flex-search {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
width: 100%;
border: 1px solid #222;
border-radius: .4em;
background-color: #fff;
}
.flex-search > :first-child {
-webkit-flex: 1;
flex: 1;
}
.flex-search > :last-child {
width: 2em;
border-left: 1px solid #ccc;
cursor: pointer;
}
.flex-search > :last-child:after {
content: '\00a0';
display: block;
width: 100%;
height: 100%;
background: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAEG0lEQVQ4EQEQBO/7AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhwAAAOwAAAASAAAAEgAAAOwAAACIAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADQAAAADAAAAG8AAAAAAAAADAAAAM8AAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAACIAAAAEwAAAAYAAAAHAAAALwAAACQAAADRAAAA2QAAACkAAABdAAAAvAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwAAAD4AAAAsAAAAG4AAAAAAAAAAAAAAG4AAACwAAAA+AAAAOwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAIEAAADHAAAAAAAAAAAAAAAAAAAAAAAAAMcAAACBAAAAFAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwAAAD4AAAAsAAAAG4AAAAAAAAAAAAAAG4AAACwAAAA+AAAAOwAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAiAAAAM8AAAAGAAAAVAAAABcAAAAAAAAA6QAAAKwAAAD6AAAAMQAAAHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFcAAAD4AAAAgQAAAIEAAAD4AAAAVwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhwAAAOwAAAASAAAAEgAAAOwAAACIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA6eSOOoDWnnAAAAABJRU5ErkJggg==' ) no-repeat center center;
opacity: 0.5;
}
.flex-search > :last-child:hover:after {
opacity: 1;
}
.flex-search > :last-child > :first-child {
position: absolute;
right: -1px;
bottom: 0;
display: none;
padding: 0 .25em 2.1em 0;
color: #fff;
}
.flex-search > :last-child:hover > :first-child {
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flex-search label {
display: block;
cursor: pointer;
background-color: #ccc;
}
.flex-search label > span {
position: relative;
display: block;
font-size: 85%;
text-align: right;
padding: .2em .8em .2em 30%;
}
.flex-search label:hover > span,
.flex-search input[type="radio"]:checked ~ span {
color: #999;
background-color: #eee;
}
.flex-search input[type="radio"]:checked ~ span:before {
position: absolute;
left: .7em;
content: '✔';
}
.flex-search input[type="radio"] {
display: none;
}
.flex-search input[type="text"] {
width: 100%;
box-sizing: border-box;
padding: .2em .8em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<fieldset class="flex-search">
<span>
<input type="text" name="id" placeholder="contains">
</span>
<span>
<span>
<label><input type="radio" name="t-id" value="c" checked="checked"><span>contains</span></label>
<label><input type="radio" name="t-id" value="s"><span>starts with</span></label>
<label><input type="radio" name="t-id" value="e"><span>ends with</span></label>
<label><input type="radio" name="t-id" value="i"><span>equals</span></label>
</span>
</span>
</fieldset>
</div>
Do you have any idea why I am not getting the expected result in Webkit browsers and how I can get it to work in them?
I suspect my code might actually be more complex than it needs to be. If you have suggestions on how to simplify, that is greatly appreciated as well of course, but I'm mainly focused on how to make the current code work in Webkit browsers.

Answer 1

Why the cogwheel ends up on the second line is because of a webkit bug that does not render fieldset elements as a flexbox container
Here is a list of flexbugs mentioning the same bug: Some html elements cant be flex containers
If you add a div as an inner wrapper it will work.
<fieldset>
<div class="flex-search">
....
</div>
</fieldset>
Stack snippet
$('.flex-search input[type="radio"]').click(function() {
$(this).closest('span')
.css('display', 'none')
.delay(500)
.queue(function(next) {
$(this).removeAttr('style');
next();
});
$(this).closest('fieldset')
.find('input[type="text"]')
.attr('placeholder', $(this).closest('label').text())
.focus();
});
* {
margin: 0;
padding: 0;
border: medium none;
border-spacing: 0;
outline: none;
outline: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: inherit;
text-decoration: none;
text-indent: 0;
list-style: none outside none;
background: none repeat scroll 0 0 transparent;
}
*::-moz-focus-inner {
border: 0;
padding: 0;
}
html {
color: #222;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
text-align: left;
height: 100%;
}
body {
font-size: 1.4rem;
line-height: 1.5em;
min-height: 100%;
background-color: #fff;
}
div {
margin: 150px auto 0;
width: 300px;
}
::-webkit-input-placeholder {
color: #666;
font-size: 85%;
}
:-moz-placeholder {
color: #666;
font-size: 85%;
}
::-moz-placeholder {
color: #666;
font-size: 85%;
}
:-ms-input-placeholder {
color: #666;
font-size: 85%;
}
:focus::-webkit-input-placeholder {
color: #ccc;
}
:focus:-moz-placeholder {
color: #ccc;
}
:focus::-moz-placeholder {
color: #ccc;
}
:focus:-ms-input-placeholder {
color: #ccc;
}
.flex-search {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
width: 100%;
border: 1px solid #222;
border-radius: .4em;
background-color: #fff;
}
.flex-search> :first-child {
-webkit-flex: 1;
flex: 1;
}
.flex-search> :last-child {
width: 2em;
border-left: 1px solid #ccc;
cursor: pointer;
}
.flex-search> :last-child:after {
content: '\00a0';
display: block;
width: 100%;
height: 100%;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAEG0lEQVQ4EQEQBO/7AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhwAAAOwAAAASAAAAEgAAAOwAAACIAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADQAAAADAAAAG8AAAAAAAAADAAAAM8AAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAACIAAAAEwAAAAYAAAAHAAAALwAAACQAAADRAAAA2QAAACkAAABdAAAAvAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwAAAD4AAAAsAAAAG4AAAAAAAAAAAAAAG4AAACwAAAA+AAAAOwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAIEAAADHAAAAAAAAAAAAAAAAAAAAAAAAAMcAAACBAAAAFAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwAAAD4AAAAsAAAAG4AAAAAAAAAAAAAAG4AAACwAAAA+AAAAOwAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAiAAAAM8AAAAGAAAAVAAAABcAAAAAAAAA6QAAAKwAAAD6AAAAMQAAAHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFcAAAD4AAAAgQAAAIEAAAD4AAAAVwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhwAAAOwAAAASAAAAEgAAAOwAAACIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA6eSOOoDWnnAAAAABJRU5ErkJggg==') no-repeat center center;
opacity: 0.5;
}
.flex-search> :last-child:hover:after {
opacity: 1;
}
.flex-search> :last-child> :first-child {
position: absolute;
right: -1px;
bottom: 0;
display: none;
padding: 0 .25em 2.1em 0;
color: #fff;
}
.flex-search> :last-child:hover> :first-child {
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flex-search label {
display: block;
cursor: pointer;
background-color: #ccc;
}
.flex-search label>span {
position: relative;
display: block;
font-size: 85%;
text-align: right;
padding: .2em .8em .2em 30%;
}
.flex-search label:hover>span,
.flex-search input[type="radio"]:checked~span {
color: #999;
background-color: #eee;
}
.flex-search input[type="radio"]:checked~span:before {
position: absolute;
left: .7em;
content: '✔';
}
.flex-search input[type="radio"] {
display: none;
}
.flex-search input[type="text"] {
width: 100%;
box-sizing: border-box;
padding: .2em .8em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<fieldset>
<div class="flex-search">
<span>
<input type="text" name="id" placeholder="contains">
</span>
<span>
<span>
<label><input type="radio" name="t-id" value="c" checked="checked"><span>contains</span></label>
<label><input type="radio" name="t-id" value="s"><span>starts with</span></label>
<label><input type="radio" name="t-id" value="e"><span>ends with</span></label>
<label><input type="radio" name="t-id" value="i"><span>equals</span></label>
</span>
</span>
</div>
</fieldset>
</div>

Answer 2

In the following, you say that the span should be padding-left: 30%. As a result the space for the text is too small. Just remove the 30% and it will work fine. You can also add .8em as a fourth parameter but the browser will do it automatically for you.
.flex-search label>span {
position: relative;
display: block;
font-size: 85%;
text-align: right;
padding: .2em .8em .2em; <-- 30% removed
}
$('.flex-search input[type="radio"]').click(function() {
$(this).closest('span')
.css('display', 'none')
.delay(500)
.queue(function(next) {
$(this).removeAttr('style');
next();
});
$(this).closest('fieldset')
.find('input[type="text"]')
.attr('placeholder', $(this).closest('label').text())
.focus();
});
* {
margin: 0;
padding: 0;
border: medium none;
border-spacing: 0;
outline: none;
outline: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: inherit;
text-decoration: none;
text-indent: 0;
list-style: none outside none;
background: none repeat scroll 0 0 transparent;
}
*::-moz-focus-inner {
border: 0;
padding: 0;
}
html {
color: #222;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
text-align: left;
height: 100%;
}
body {
font-size: 1.4rem;
line-height: 1.5em;
min-height: 100%;
background-color: #fff;
}
div {
margin: 150px auto 0;
width: 300px;
}
::-webkit-input-placeholder {
color: #666;
font-size: 85%;
}
:-moz-placeholder {
color: #666;
font-size: 85%;
}
::-moz-placeholder {
color: #666;
font-size: 85%;
}
:-ms-input-placeholder {
color: #666;
font-size: 85%;
}
:focus::-webkit-input-placeholder {
color: #ccc;
}
:focus:-moz-placeholder {
color: #ccc;
}
:focus::-moz-placeholder {
color: #ccc;
}
:focus:-ms-input-placeholder {
color: #ccc;
}
.flex-search {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
width: 100%;
border: 1px solid #222;
border-radius: .4em;
background-color: #fff;
}
.flex-search> :first-child {
-webkit-flex: 1;
flex: 1;
}
.flex-search> :last-child {
width: 2em;
border-left: 1px solid #ccc;
cursor: pointer;
}
.flex-search> :last-child:after {
content: '\00a0';
display: block;
width: 100%;
height: 100%;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAEG0lEQVQ4EQEQBO/7AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhwAAAOwAAAASAAAAEgAAAOwAAACIAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADQAAAADAAAAG8AAAAAAAAADAAAAM8AAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAACIAAAAEwAAAAYAAAAHAAAALwAAACQAAADRAAAA2QAAACkAAABdAAAAvAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwAAAD4AAAAsAAAAG4AAAAAAAAAAAAAAG4AAACwAAAA+AAAAOwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAIEAAADHAAAAAAAAAAAAAAAAAAAAAAAAAMcAAACBAAAAFAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwAAAD4AAAAsAAAAG4AAAAAAAAAAAAAAG4AAACwAAAA+AAAAOwAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAiAAAAM8AAAAGAAAAVAAAABcAAAAAAAAA6QAAAKwAAAD6AAAAMQAAAHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFcAAAD4AAAAgQAAAIEAAAD4AAAAVwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhwAAAOwAAAASAAAAEgAAAOwAAACIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA6eSOOoDWnnAAAAABJRU5ErkJggg==') no-repeat center center;
opacity: 0.5;
}
.flex-search> :last-child:hover:after {
opacity: 1;
}
.flex-search> :last-child> :first-child {
position: absolute;
right: -1px;
bottom: 0;
display: none;
padding: 0 .25em 2.1em 0;
color: #fff;
}
.flex-search> :last-child:hover> :first-child {
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flex-search label {
display: block;
cursor: pointer;
background-color: #ccc;
}
.flex-search label>span {
position: relative;
display: block;
font-size: 85%;
text-align: right;
padding: .2em .8em .2em;
}
.flex-search label:hover>span,
.flex-search input[type="radio"]:checked~span {
color: #999;
background-color: #eee;
}
.flex-search input[type="radio"]:checked~span:before {
position: absolute;
left: .7em;
content: '✔';
}
.flex-search input[type="radio"] {
display: none;
}
.flex-search input[type="text"] {
width: 100%;
box-sizing: border-box;
padding: .2em .8em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<fieldset class="flex-search">
<span>
<input type="text" name="id" placeholder="contains">
</span>
<span>
<span>
<label><input type="radio" name="t-id" value="c" checked="checked"><span>contains</span></label>
<label><input type="radio" name="t-id" value="s"><span>starts with</span></label>
<label><input type="radio" name="t-id" value="e"><span>ends with</span></label>
<label><input type="radio" name="t-id" value="i"><span>equals</span></label>
</span>
</span>
</fieldset>
</div>
Update:
In the event that the 30% should give the check mark enough space, you can also replace it with 2em:
.flex-search label>span {
position: relative;
display: block;
font-size: 85%;
text-align: right;
padding: .2em .8em .2em 2em;
}
$('.flex-search input[type="radio"]').click(function() {
$(this).closest('span')
.css('display', 'none')
.delay(500)
.queue(function(next) {
$(this).removeAttr('style');
next();
});
$(this).closest('fieldset')
.find('input[type="text"]')
.attr('placeholder', $(this).closest('label').text())
.focus();
});
* {
margin: 0;
padding: 0;
border: medium none;
border-spacing: 0;
outline: none;
outline: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: inherit;
text-decoration: none;
text-indent: 0;
list-style: none outside none;
background: none repeat scroll 0 0 transparent;
}
*::-moz-focus-inner {
border: 0;
padding: 0;
}
html {
color: #222;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
text-align: left;
height: 100%;
}
body {
font-size: 1.4rem;
line-height: 1.5em;
min-height: 100%;
background-color: #fff;
}
div {
margin: 150px auto 0;
width: 300px;
}
::-webkit-input-placeholder {
color: #666;
font-size: 85%;
}
:-moz-placeholder {
color: #666;
font-size: 85%;
}
::-moz-placeholder {
color: #666;
font-size: 85%;
}
:-ms-input-placeholder {
color: #666;
font-size: 85%;
}
:focus::-webkit-input-placeholder {
color: #ccc;
}
:focus:-moz-placeholder {
color: #ccc;
}
:focus::-moz-placeholder {
color: #ccc;
}
:focus:-ms-input-placeholder {
color: #ccc;
}
.flex-search {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
width: 100%;
border: 1px solid #222;
border-radius: .4em;
background-color: #fff;
}
.flex-search> :first-child {
-webkit-flex: 1;
flex: 1;
}
.flex-search> :last-child {
width: 2em;
border-left: 1px solid #ccc;
cursor: pointer;
}
.flex-search> :last-child:after {
content: '\00a0';
display: block;
width: 100%;
height: 100%;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAEG0lEQVQ4EQEQBO/7AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhwAAAOwAAAASAAAAEgAAAOwAAACIAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADQAAAADAAAAG8AAAAAAAAADAAAAM8AAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAACIAAAAEwAAAAYAAAAHAAAALwAAACQAAADRAAAA2QAAACkAAABdAAAAvAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwAAAD4AAAAsAAAAG4AAAAAAAAAAAAAAG4AAACwAAAA+AAAAOwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAIEAAADHAAAAAAAAAAAAAAAAAAAAAAAAAMcAAACBAAAAFAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwAAAD4AAAAsAAAAG4AAAAAAAAAAAAAAG4AAACwAAAA+AAAAOwAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAiAAAAM8AAAAGAAAAVAAAABcAAAAAAAAA6QAAAKwAAAD6AAAAMQAAAHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFcAAAD4AAAAgQAAAIEAAAD4AAAAVwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhwAAAOwAAAASAAAAEgAAAOwAAACIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA6eSOOoDWnnAAAAABJRU5ErkJggg==') no-repeat center center;
opacity: 0.5;
}
.flex-search> :last-child:hover:after {
opacity: 1;
}
.flex-search> :last-child> :first-child {
position: absolute;
right: -1px;
bottom: 0;
display: none;
padding: 0 .25em 2.1em 0;
color: #fff;
}
.flex-search> :last-child:hover> :first-child {
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flex-search label {
display: block;
cursor: pointer;
background-color: #ccc;
}
.flex-search label>span {
position: relative;
display: block;
font-size: 85%;
text-align: right;
padding: .2em .8em .2em 2em;
}
.flex-search label:hover>span,
.flex-search input[type="radio"]:checked~span {
color: #999;
background-color: #eee;
}
.flex-search input[type="radio"]:checked~span:before {
position: absolute;
left: .7em;
content: '✔';
}
.flex-search input[type="radio"] {
display: none;
}
.flex-search input[type="text"] {
width: 100%;
box-sizing: border-box;
padding: .2em .8em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<fieldset class="flex-search">
<span>
<input type="text" name="id" placeholder="contains">
</span>
<span>
<span>
<label><input type="radio" name="t-id" value="c" checked="checked"><span>contains</span></label>
<label><input type="radio" name="t-id" value="s"><span>starts with</span></label>
<label><input type="radio" name="t-id" value="e"><span>ends with</span></label>
<label><input type="radio" name="t-id" value="i"><span>equals</span></label>
</span>
</span>
</fieldset>
</div>
Connecting both solution from LGSon and this one, the result should be something like this:
$('.flex-search input[type="radio"]').click(function() {
$(this).closest('span')
.css('display', 'none')
.delay(500)
.queue(function(next) {
$(this).removeAttr('style');
next();
});
$(this).closest('fieldset')
.find('input[type="text"]')
.attr('placeholder', $(this).closest('label').text())
.focus();
});
* {
margin: 0;
padding: 0;
border: medium none;
border-spacing: 0;
outline: none;
outline: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: inherit;
text-decoration: none;
text-indent: 0;
list-style: none outside none;
background: none repeat scroll 0 0 transparent;
}
*::-moz-focus-inner {
border: 0;
padding: 0;
}
html {
color: #222;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
text-align: left;
height: 100%;
}
body {
font-size: 1.4rem;
line-height: 1.5em;
min-height: 100%;
background-color: #fff;
}
div {
margin: 150px auto 0;
width: 300px;
}
::-webkit-input-placeholder {
color: #666;
font-size: 85%;
}
:-moz-placeholder {
color: #666;
font-size: 85%;
}
::-moz-placeholder {
color: #666;
font-size: 85%;
}
:-ms-input-placeholder {
color: #666;
font-size: 85%;
}
:focus::-webkit-input-placeholder {
color: #ccc;
}
:focus:-moz-placeholder {
color: #ccc;
}
:focus::-moz-placeholder {
color: #ccc;
}
:focus:-ms-input-placeholder {
color: #ccc;
}
.flex-search {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
width: 100%;
border: 1px solid #222;
border-radius: .4em;
background-color: #fff;
}
.flex-search> :first-child {
-webkit-flex: 1;
flex: 1;
}
.flex-search> :last-child {
width: 2em;
border-left: 1px solid #ccc;
cursor: pointer;
}
.flex-search> :last-child:after {
content: '\00a0';
display: block;
width: 100%;
height: 100%;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAEG0lEQVQ4EQEQBO/7AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhwAAAOwAAAASAAAAEgAAAOwAAACIAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADQAAAADAAAAG8AAAAAAAAADAAAAM8AAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAACIAAAAEwAAAAYAAAAHAAAALwAAACQAAADRAAAA2QAAACkAAABdAAAAvAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwAAAD4AAAAsAAAAG4AAAAAAAAAAAAAAG4AAACwAAAA+AAAAOwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAIEAAADHAAAAAAAAAAAAAAAAAAAAAAAAAMcAAACBAAAAFAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwAAAD4AAAAsAAAAG4AAAAAAAAAAAAAAG4AAACwAAAA+AAAAOwAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAiAAAAM8AAAAGAAAAVAAAABcAAAAAAAAA6QAAAKwAAAD6AAAAMQAAAHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFcAAAD4AAAAgQAAAIEAAAD4AAAAVwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhwAAAOwAAAASAAAAEgAAAOwAAACIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA6eSOOoDWnnAAAAABJRU5ErkJggg==') no-repeat center center;
opacity: 0.5;
}
.flex-search> :last-child:hover:after {
opacity: 1;
}
.flex-search> :last-child> :first-child {
position: absolute;
right: -1px;
bottom: 0;
display: none;
padding: 0 .25em 2.1em 0;
color: #fff;
}
.flex-search> :last-child:hover> :first-child {
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flex-search label {
display: block;
cursor: pointer;
background-color: #ccc;
}
.flex-search label>span {
position: relative;
display: block;
font-size: 85%;
text-align: right;
padding: .2em .8em .2em 2em;
}
.flex-search label:hover>span,
.flex-search input[type="radio"]:checked~span {
color: #999;
background-color: #eee;
}
.flex-search input[type="radio"]:checked~span:before {
position: absolute;
left: .7em;
content: '✔';
}
.flex-search input[type="radio"] {
display: none;
}
.flex-search input[type="text"] {
width: 100%;
box-sizing: border-box;
padding: .2em .8em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="flex-search">
<span>
<input type="text" name="id" placeholder="contains">
</span>
<span>
<span>
<label><input type="radio" name="t-id" value="c" checked="checked"><span>contains</span></label>
<label><input type="radio" name="t-id" value="s"><span>starts with</span></label>
<label><input type="radio" name="t-id" value="e"><span>ends with</span></label>
<label><input type="radio" name="t-id" value="i"><span>equals</span></label>
</span>
</span>
</div>
</div>