Flex 项目不会在 Webkit 浏览器中显示

Question

我创建了一个带有小齿轮的文本字段，它在弹出菜单中提供了有关如何处理搜索字符串的选项。对于某些部分，它使用了灵活的盒子布局。

在 Firefox 中，我得到了预期的结果：
.

在 Webkit 浏览器（Safari 和 Vivaldi）中，我得到了这个结果：

如您所见，齿轮不在一条直线上。这是我主要关心的问题。我不太担心菜单文本不会拉伸，因为可以通过给它的任何容器一个宽度来轻松解决这个问题。

我目前没有 Chrome，但我怀疑它可能会以与其他 Webkit 浏览器类似的方式呈现它。

这是我认为与我的问题相关的css。

.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 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: '[=12=]a0';
  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>

您是否知道为什么我在 Webkit 浏览器中没有得到预期的结果，以及如何让它在其中工作？

我怀疑我的代码实际上可能比需要的更复杂。如果您有关于如何简化的建议，当然也非常感谢，但我主要关注如何使当前代码在 Webkit 浏览器中工作。

Answer 1

在下面，你说 span 应该是 padding-left: 30%。结果，文本的 space 太小了。只需删除 30%，它就可以正常工作。您还可以添加 .8em 作为第四个参数，但浏览器会自动为您完成。

.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: '[=12=]a0';
  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>

更新： 如果30%应该打勾就够了space，也可以换成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: '[=16=]a0';
  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>

连接 LGSon 的解决方案和这个解决方案，结果应该是这样的：

$('.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: '[=16=]a0';
  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>

Answer 2

为什么齿轮最终出现在第二行是因为 webkit bug 没有将 fieldset 元素呈现为 flexbox 容器

这是提到相同错误的 flexbugs 的列表：Some html elements cant be flex containers

如果您添加一个 div 作为内包装，它将起作用。

<fieldset>
  <div class="flex-search">
    ....
  </div>
</fieldset>

堆栈片段

$('.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: '[=12=]a0';
  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>

Flex 项目不会在 Webkit 浏览器中显示

Flex items don't show in line in Webkit browsers

html

css

layout

webkit

flexbox