问Plotly中的列问题-使用自定义CSS划线

EN

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from app import app
from styles import cma_tab_style, active_cma_tab_style


def show_layout():
    layout = html.Div([
        dcc.Tabs(id='AllTabs',
                 value='SetupTab',
                 children=[
                     dcc.Tab(label='Setup',
                             value='SetupTab',
                             style=cma_tab_style,
                             selected_style=active_cma_tab_style),
                     dcc.Tab(label='Summary',
                             value='SummaryTab',
                             style=cma_tab_style,
                             selected_style=active_cma_tab_style)
                 ]),
        html.Div(id='content')
    ], style={'marginTop': '30px'})
    return layout


@app.callback(Output('content', 'children'),
              Input('AllTabs', 'value'))
def render_content(tab):
    if tab == 'SetupTab':
        content = html.Div(render_setup_tab())
    else:
        content = html.Div([
            html.H3('Tab content 2')
        ])
    return content


def render_setup_tab():
    layout = html.Div(
        children=
        [

            html.Div(
                [
                    dcc.Dropdown(
                        id='the_assets',
                        options=[{'label': x, 'value': x} for x in ('Asset 1', 'Asset 2')],
                        style={'marginTop': '15px', 'background': 'black', 'color': 'black'},
                        placeholder='Asset Name')
                ], className='four columns'),
            html.Div(
                [
                    dcc.Dropdown(
                        id='cma_data',
                        style={'marginTop': '15px', 'backgroundColor': 'black', 'fontColor': 'white'},
                        placeholder='CMA Data',
                    )
                ], className='four columns'),
            html.Div(
                [
                    dcc.Dropdown(
                        id='cma_gen',
                        style={'marginTop': '15px', 'backgroundColor': 'black', 'fontColor': 'white'},
                        placeholder='Gen Profile'
                    )
                ], className='four columns'),
        ], className='row')
    return layout

cma_tab_style = {
    'borderBottom': '1px solid #d6d6d6',
    'backgroundColor': 'rgb(80, 80, 80)',
    'color': 'white',
    'borderTop': '1px solid white',
}

active_cma_tab_style = {
    'borderBottom': '1px solid #d6d6d6',
    'backgroundColor': 'rgb(255,145,0)',
    'color': 'white',
    'borderTop': '1px solid white',
}

body{
    background-color: rgb(33, 33, 33);
    font-family: 'arial';
}

h3{
    font-color: white;
}

li{
    display: block;
    float: center;
    border: 1px solid gray;
    border-right: 1px solid rgb(200, 200, 200);
}


li a{
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    border: 1px solid gray;
}

.active .btn:hover{
    background-color: orange;
    color: white;
}

.ul:hover{
    background-color: orange;
}


li a:active{
    background-color: orange;
}

a{
    display: inline-block;
    padding: 8px;
    background-color: (250, 250, 250)
}

a:hover{
    background-color: orange;
}

.active{
    background-color: rgb(60, 60, 60);
}

.VirtualizedSelectFocusedOption{
    background-color: lightgrey;
    color: black
}

button{
    border-radius: 5px;
    background-color: rgb(60, 60, 60);
    border: none;
    color: white;
    text-align: center;
    font-size: 16px;
    padding: 20px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px
}

button span{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

button span:after{
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}