在CSS中覆盖系统样式外观在asp.net中不起作用

Question

我正在尝试制作一个可以更改dropdown控件外观为label的css，同时同一页面中的其他其他dropdown将以其默认外观出现，但是两个dropdown的css类名称都相同，为此我使用了带有控件的自定义属性 ，与我在CSS中使用的属性相同。 以下是示例代码。

在这里，我有两个dropdown ，我需要第一个dropdown显示为标签，第二个dropdown可编辑。

我在第二个dropdown添加了自定义属性 ，以使其可编辑，并且与在CSS中使用的属性相同，但是即使我已将其默认外观覆盖了该属性， dropdown箭头键也不会出现。

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default4.aspx.vb" Inherits="Default4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server" title="test">
    <title>TEST</title>
    <style type="text/css">

        .DropdownList, .DropdownListRequired {
            border-radius: 5px;
            -webkit-border-radius: 5;
            font-family: Calibri,"Helvetica Neue", Helvetica, Arial, sans-serif;
            padding: 1px 1px 1px 1px;
            border: none;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            color: #1E2935;
            line-height: 1;
            font-size: 13.5px;
            background-color: transparent;
            pointer-events: none;
            -ms-user-select: none;
            tab-index: -1;
            cursor: default;
            opacity: 0.55 !important;
            -webkit-appearance: none;
            -moz-appearance: button-arrow-down;
            border: none;
        }
        .DropdownList[view=readonly-edit] {
            -webkit-appearance: default-button;
            -moz-appearance: button-arrow-down;
            padding: 5px 2px 5px 2px;
            border: 3px solid #2111f3;
            color: #ff0000;
            line-height: 1.4285;
            pointer-events: auto;
            -ms-user-select: auto;
            cursor: auto;
            background-color: white;
            opacity: 1 !important;
        }               
    </style>
    <script lang="javascript" src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>

<body>

    <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="ddlSearchApplicationStatus" CssClass="DropdownList" runat="server" Width="170px">
                <asp:ListItem>Test1</asp:ListItem>
                <asp:ListItem>Test2</asp:ListItem>
                <asp:ListItem>Test3</asp:ListItem>
                <asp:ListItem>Test4</asp:ListItem>
            </asp:DropDownList>
            <asp:DropDownList ID="DropDownList1" CssClass="DropdownList" runat="server" Width="170px" view="readonly-edit">
                <asp:ListItem>Opt1</asp:ListItem>
                <asp:ListItem>Opt2</asp:ListItem>
                <asp:ListItem>Opt3</asp:ListItem>
                <asp:ListItem>Opt4</asp:ListItem>
            </asp:DropDownList>

            <%--<asp:Button ID="Button1" runat="server" Text="Expire Cookie" OnClientClick="return ExpireCookie();" />--%>
        </div>
    </form>

</body>

第二个dropdown如下所示，我需要它以默认外观显示并带有向下箭头。

Answer 1

我遇到了问题， -webkit-appearance:default-button应该是-webkit-appearance:menulist 。

.DropdownList[view=readonly-edit] {
            -webkit-appearance: menulist;
            -moz-appearance: menulist;
            padding: 5px 2px 5px 2px;
            border: 3px solid #2111f3;
            color: #ff0000;
            line-height: 1.4285;
            pointer-events: auto;
            -ms-user-select: auto;
            cursor: auto;
            background-color: white;
            opacity: 1 !important;
        }