使用css美化gradio界面

羊城迷鹿2023-08-27 14:46

基本方法

在默认的前端页面中使用检查工具确定要修改的部分的选择器名称，然后在block_css中对其修改，并在启动网页时传入参数：with gr.Blocks(css=block_css, theme=my_theme) as demo:

禁止修改下拉框文字

css 复制代码

input.border-none.svelte-c0u3f0 {
    pointer-events: none;
}

隐藏页脚的gradio标记

css 复制代码

footer.svelte-1ax1toq {
    display: none !important;
}

表格样式修改

css 复制代码

table {
  border: 3px solid gray !important;
  margin-left: 1px !important;
}

td, th {
  border: 3px solid gray !important; 
  padding-left: 5px !important;
  padding-right: 5px !important;
  font-size: 20px !important;
}

标题居中

css 复制代码

h2 {
  text-align: center !important;
}

选择框均匀分布

css 复制代码

.wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt {
    justify-content: space-around !important;
}