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

【问题标题】：Overriding system style appearance in css does not work asp.net在 css 中覆盖系统样式外观不起作用 asp.net
【发布时间】：2018-01-06 21:12:05
【问题描述】：

我正在尝试制作一个可以将dropdown 控件外观更改为label 的css，同时同一页面中的其他dropdown 将以其默认外观出现，但css 类名称将相同dropdown，为了实现这一点，我使用带有控件的 custom attribute 和我在 css 中使用的相同。以下是示例代码。

这里我有两个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 看起来像这样，我需要它以带有向下箭头的默认外观出现。

【问题讨论】：

标签： jquery html css asp.net dom

【解决方案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;
        }

【讨论】：