HTML / CSS - 删除/重新着色下拉选项的边框

时间:2017-03-02 08:15:19

标签: html css



select {
  width: 300px;
  font-family: inherit;
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;  
  padding-right: 30px;
  display:block;
  color: #999;
  border: none;
  border-bottom: 1px solid #757575;
}
*:focus {
outline: #757575;
}
 
select:focus {outline:0;}

<select class="weekselection">
  <option value="" disabled selected>Choose the weekday</option>
  <option value="0">Monday</option>
  <option value="1">Tuesday</option>
  <option value="2">Wednesday</option>
  <option value="3">Thursday</option>
  <option value="4">Friday</option>
  <option value="5">Saturday</option>
  <option value="6">Sunday</option>
</select>
&#13;
&#13;
&#13;

我想删除或更改下拉菜单的颜色:enter image description here

箭头标出蓝色的东西。我尝试过

的组合
select {
  border: none;
}

*:focus {
outline: #757575;
}

select:focus {outline:0;}

但它仍然存在。我该如何删除它?谢谢!

HTML:

<select class="weekselection">
    <option value="" disabled selected>Choose the weekday</option>
    <option value="0">Monday</option>
    <option value="1">Tuesday</option>
    <option value="2">Wednesday</option>
    <option value="3">Thursday</option>
    <option value="4">Friday</option>
    <option value="5">Saturday</option>
    <option value="6">Sunday</option>
</select>

3 个答案:

答案 0 :(得分:0)

与另一个问题相似,我引用:

选择的下拉列表是所谓的ShadowDOM的一部分。在目前的CSS规范3级中,没有办法定位大多数ShadowDOM元素。你可以在这里阅读关于ShadowDOM的规格,尽管那里没有你想要的东西。

Chrome有一些专有选择器可以更改一些shadowDOM元素,但不是全部。 Firefox的数量甚至更少(据我所知),Opera也没有。 IE可能同样糟糕或更糟。

考虑到兼容性,最好的办法是使用Jquery插件来模拟使用其他HTML元素的select,如果你真的想要设置它的样式。这是一个整洁的。

Select menu option border none

答案 1 :(得分:0)

  

答案是:你不能因为css无法修改选项的风格。

但是你可以使用一个列表,让它像下拉列表一样自由地设计风格:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <label>One</label>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
    </ul>
</body>
</html>
<style>
    ul {
        display: table;
        list-style: none;
        padding: 0;
    }

    ul li {
        display: block;
    }
</style>
<script>
    $("ul li").slideUp();
    $("label").click(function () {
        $("ul li").slideToggle();
    });
    $("ul li").click(function () {
        $("label").text($(this).text());
        $("ul li").slideToggle();
    });
</script>

    $("ul li").slideUp();
    $("label").click(function () {
        $("ul li").slideToggle();
    });
    $("ul li").click(function () {
        $("label").text($(this).text());
        $("ul li").slideToggle();
    });
    ul {
        display: table;
        list-style: none;
        padding: 0;
    }

    ul li {
        display: block;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label>One</label>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
    </ul>

答案 2 :(得分:-3)

我认为“!important”将帮助您解决问题。

INSERT INTO DomainAccounts (Domain_Name, Account_ID, SiteID, Account_Name)
SELECT Domain_Name, Account_ID, SiteID, Account_Name
FROM @T

INSERT INTO BotExceptions (DomainAccounts_Id, BotName)
SELECT da.Id, Item
FROM @T t 
INNER JOIN DomainAccounts da ON t.Domain_Name = da.Domain_Name
                            AND t.Account_ID = da.Account_ID
                            AND t.SiteID = da.SiteID
                            AND t.Account_Name = da.Account_Name

CROSS APPLY dbo.SplitStrings(BotExceptions, ' ') 
WHERE LEN(LTRIM(RTRIM(Item))) > 0

INSERT INTO BlockCountries (DomainAccounts_Id,CountryName)
SELECT da.Id, Item
FROM @T t 
INNER JOIN DomainAccounts da ON t.Domain_Name = da.Domain_Name
                            AND t.Account_ID = da.Account_ID
                            AND t.SiteID = da.SiteID
                            AND t.Account_Name = da.Account_Name

CROSS APPLY dbo.SplitStrings(BlockCountries, ' ') 
WHERE LEN(LTRIM(RTRIM(Item))) > 0