Question

问题

我想制作像谷歌一样的选择标签这是我的

这是我的代码

 `<script >
        function format(state) {
            if (!state.id) return state.text;
            return "<img class='flag' src='Photos/" + state.id.toLowerCase() + ".jpg'/>" + $(originalOption).data('foo') + "' />" + state.text;
        }
</script>
<select id="mobilephone">
    <option value="indo" ><img src="Photos/indo.jpg" id="captchaimg">Indonesia</option>
    <option style="background-image:url(Photos/rico.png);">Rico</option>
    <option style="background-image:url(Photos/SA.png);">South Africa</option>
    <option style="background-image:url(Photos/UK.jpg);">United Kingdom</option>
</select>`

我想让它像下面的图像

Answer 1

如果您使用的是jQueryUI，那么这可能有效：http://jqueryui.com/selectmenu/#custom_render

这看起来很整洁：http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx

您无法使用<select>标记直接执行此操作，因为这是表单元素，但您可以使用<div>或其他方法实现此操作。

解决这个问题的方法可能是：

<select>
    <option style="background-image:url(something.png);">male</option>
    <option style="background-image:url(something.png);">female</option>
    <option style="background-image:url(something.png);">others</option>
</select>

但这只适用于Firefox :(

我个人建议使用一些像上面那样的JS小部件库。

希望这有帮助！

Answer 2

您可以简单地为每个标志使用表情符号。

Center(
          child: Text.rich(
    TextSpan(
      children: <TextSpan>[
        TextSpan(
          text: 'You add ',
          style: TextStyle(
            fontSize: 10.0,
            color: Colors.black,
          ),
        ),
        TextSpan(
          text: '?',
        ),
        TextSpan(
          text: 'Here',
        ),
      ],
    ),
    textAlign: TextAlign.center,
    style: TextStyle(fontSize: 10.0,),
  ),
),

HTML：在select标签处插入图片

问题

这是我的代码

2 个答案: