Question

我正在尝试制作一个可以将dropdown控件外观更改为label的css，同时同一页面中的其他dropdown将以其默认外观显示，但css对于dropdown，类名称都是相同的，为了达到这个目的，我使用自定义属性来控制和我在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就像是这样，我需要它以带有向下箭头的默认外观显示。

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;
        }

在css中覆盖系统样式外观不适用于asp.net

1 个答案: