Tagged inside Featherlight Form？

我正在创建一个使用Featherlight和Taggle的标签。Tagged inside Featherlight Form？

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

但是，标签在Featherlight窗体中不具有风格。

演示

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; 
}

来源

2017-02-13 Matt McManis

这是因为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规则。

来源

2017-02-13 16:07:13

我看不到要更改的内容。所有的课程和ID都保持相同的羽毛灯和非Featherlight Taggle输入。该css从taggle.min.css加载。 –

那么你想要什么风格？文字输入正确吗？ –

Taggle JavaScript使用taggle.min.css自动输入样式。但是，如果在羽毛之下，它不会激活和应用。 –

Tagged inside Featherlight Form？

回答

相关问题