Question

我创建的表单包含使用Featherlight和Taggle的标记。

当您键入标签并用逗号分隔时，它们会变成样式框。

但是，当采用羽毛灯形式时，标签不会打造。

演示

HTML

<body>

  <br />

  <!-- Featherlight Button -->
  <p><a href="#" data-featherlight="#myform">Open Featherlight</a></p>

  <!-- Featherlight Form -->
  <div class="container">
    <form id="myform" class="form">
      <!-- Tags -->
      Tags (Featherlight)
      <div id="tags-featherlight"></div>
    </form>
  </div>

  <!-- Tags -->
  <br />
  Tags (No Featherlight)
  <div id="tags"></div>

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="https://noelboss.github.io/featherlight/release/featherlight.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/taggle/1.11.2/taggle.js"></script>
  <script>
    new Taggle('tags');
    new Taggle('tags-featherlight');
  </script>

</body>

CSS

@import 'https://sean.is/assets/styles/css/projects/taggle/taggle.min.css';

html, body { 
  font-family: Arial, sans-serif; 
  background: white !important;
 }
.container { 
  display:none; 
 }
.form { 
  width:300px;
  height:200px;
  background:white;
  border:1px solid black; 
}
.taggle_input { 
  border: 1px solid gray !important;
}

Answer 1

这是因为Featherlight / Taggle会修改您的HTML。

此：

<form id="myform" class="form">
      <!-- Tags -->
      Tags (Featherlight)
      <div id="tags-featherlight"></div>
</form>

成为这个：

<form id="myform" class="form featherlight-inner">
    <!-- Tags -->
    Tags (Featherlight)
    <div id="tags-featherlight"><span class="taggle_placeholder" style="opacity: 1;">Enter tags...</span>
      <ul class="taggle_list">
        <li>
          <input type="text" class="taggle_input" tabindex="-1" style="padding-left: 0px; padding-right: 0px;">
        </li>
      </ul>
      <div class="taggle_sizer" style="font-size: 16px;"></div>
    </div>
  </form>

记下新的CSS类和ID，然后相应地编写CSS规则。

在Featherlight Form中标记？

1 个答案: