streamlitのボタンのカスタマイズはmarkdown()メソッドでdiv.stButtonのスタイルシートを強制設定する

はじめに

　PythonのノンHTML+CSSフレームワークであるstreamlit。フロントエンドを全てPythonコードで実装出来てお手軽にWebアプリが作れます。その反面、細かな見た目の変更ができません。

　そこで、ここでは細かな見た目の変更の一例として、ボタンのスタイルシートを設定する方法をご紹介します。

結論

• streamlitのmarkdown()メソッドを利用します
• markdown()メソッドの
  • 第１引数にスタイルシートを
  • 第２引数としてunsafe_allow_htmlにTrueを設定します
    • これでスタイルシートを強制設定することができます
• スタイルシートの設定は
  • div.stButtonの子要素のbuttonタグに対して行います

実装例

streamlitでボタンの見た目を変更します

import streamlit as st

button_css = f"""
<style>
  div.stButton > button:first-child  {{
    font-weight  : bold                ;/* 文字：太字                   */
    border       :  5px solid #f36     ;/* 枠線：ピンク色で5ピクセルの実線 */
    border-radius: 10px 10px 10px 10px ;/* 枠線：半径10ピクセルの角丸     */
    background   : #ddd                ;/* 背景色：薄いグレー            */
  }}
</style>
"""
st.markdown(button_css, unsafe_allow_html=True)
action = st.button('このボタンを押してください')

書式

streamlitでボタンに任意のスタイルシートを適用する書式

スタイルシートHTML = f"""
  <style>
    div.stButton > button:first-child  {{
      任意のスタイルシート設定
    }}
  </style>
"""
st.markdown(スタイルシートHTML, unsafe_allow_html=True)
ボタンの戻り値 = st.button('ボタンラベル名')