Hi, I want to show some images with html tabs. I use the fellowing code with pure html and CSS, which is OK in the html file. But streamlit doesn’t work.
import streamlit as st
html= """
<div>
<style>
input { display: none; }
input + label { display: inline-block }
input + label {
border: 1px solid #999;
background: #EEE;
padding: 4px 12px;
border-radius: 4px 4px 0 0;
position: relative;
top: 1px;
}
input:checked + label {
background: #FFF;
border-bottom: 1px solid transparent;
}
input ~ .tab {
border-top: 1px solid #999;
padding: 12px;
}
input ~ .tab { display: none }
#tabf3bac67e-a156-46fd-93cd-5015f284d250:checked ~ .tab.contentf3bac67e-a156-46fd-93cd-5015f284d250,
#tabf0688818-48b7-47a5-bcf9-e4092971255c:checked ~ .tab.contentf0688818-48b7-47a5-bcf9-e4092971255c,
#tab5f8248d8-1636-4401-9967-b558eced95da:checked ~ .tab.content5f8248d8-1636-4401-9967-b558eced95da{ display: block; }
</style>
<input type="radio" name="tabs" id="tabf3bac67e-a156-46fd-93cd-5015f284d250" checked /><label for="tabf3bac67e-a156-46fd-93cd-5015f284d250">5terre</label>
<input type="radio" name="tabs" id="tabf0688818-48b7-47a5-bcf9-e4092971255c"/><label for="tabf0688818-48b7-47a5-bcf9-e4092971255c">mountains</label>
<input type="radio" name="tabs" id="tab5f8248d8-1636-4401-9967-b558eced95da"/><label for="tab5f8248d8-1636-4401-9967-b558eced95da">woods</label>
<div class="tab contentf3bac67e-a156-46fd-93cd-5015f284d250"><div style="display: inline-block; width: 620px; vertical-align: top; text-align: center;"><h4 style="font-size: 12px">0</h4><img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="margin: 1px; width: 600px; border: 2px solid #ddd;"/></div></div>
<div class="tab contentf0688818-48b7-47a5-bcf9-e4092971255c"><div style="display: inline-block; width: 620px; vertical-align: top; text-align: center;"><h4 style="font-size: 12px">0</h4><img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="margin: 1px; width: 600px; border: 2px solid #ddd;"/></div></div>
<div class="tab content5f8248d8-1636-4401-9967-b558eced95da"><div style="display: inline-block; width: 620px; vertical-align: top; text-align: center;"><h4 style="font-size: 12px">0</h4><img src="https://www.w3schools.com/howto/img_woods_wide.jpg" style="margin: 1px; width: 600px; border: 2px solid #ddd;"/></div></div></div>
"""
st.markdown(html, unsafe_allow_html=True)
Thanks very much!
The html like this:
