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？

回答

相關問題