文章/答案/技术大牛

发布

社区首页 >问答首页 >SelectBoxIt与CSS文件冲突

问SelectBoxIt与CSS文件冲突
EN

Stack Overflow用户

提问于 2019-08-19 23:17:27

回答 1查看 49关注 0票数 0

我目前正在开发一个货币转换应用程序&尝试为货币添加旗帜图标。我正在使用SelectBoxIt jQuery插件来完成此操作。

问题是，每当我使用SelectBoxIt插件时，选择选项下拉样式就会发生冲突，如下所示。

查看选项是如何水平折叠的

令人惊讶的是，如果我删除指向我的CSS文件的链接，这个插件就会神奇地工作。

你知道怎么解决这个问题吗？

请参阅下面的完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.css" />
</head>
<body onload="convertDineroBottom()">

    <div id="containerSelect"> 
      <select id="from" onchange="convertDineroBottom()" >
        <option value="EUR" data-iconurl="https://upload.wikimedia.org/wikipedia/commons/b/b7/Flag_of_Europe.svg">EUR</option>
        <option value="USD" data-iconurl="https://cdn.countryflags.com/thumbs/united-states-of-america/flag-400.png">USD</option>
        <option value="GBP" data-iconurl="https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/221487/910/607/m1/fpnw/wm0/united-kingdom-flag-1-.jpg?1414512427&s=f16b2cb24fd704ffcf14b18ee18b5f4e">GBP</option>
        <option value="JPY">JPY</option>
        <option value="HKD">HKD</option>
      </select>

      <select id="to"  onchange="convertDineroTop()">
        <option value="GBP">GBP</option>
        <option value="EUR">EUR</option>
        <option value="USD">USD</option>
        <option value="JPY" selected>JPY</option>
        <option value="HKD">HKD</option>
      </select>
    </div>  

          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js"></script>
</body>
</html>

body{
   background: linear-gradient(0deg, rgba(100,100,100,1) 0%, rgba(165,165,165,1) 46%, rgba(186,186,190,1) 49%, rgba(205,205,208,1) 50%, rgba(222,218,218,1) 58%, rgba(221,221,221,1) 91%, rgba(181,182,182,1) 100%);
   height: 1080px;
}

nav{
    background-color: turquoise;
}

ul{
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 70%;
    margin: auto;
    padding-top:5%;
}

li{
}

#logo{
}

#date{

}

#containerInput{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 40%;
  margin: auto;
  margin-top:10%;
}

input{
  border: none;
  height: 160px;
  width: 220px;
  background-color: #0e3d73;
  color: white;
  font-size:2em;
  text-align: center;
}

#arrow{
  margin-top:9%;
}

#arrow img{
  height:50px;
  width:50px;
}

#containerSelect{
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  width: 40%;
  margin: auto;
  margin-top:2%;
}

select{
  width: 220px;
  height: 40px;
}

function convertDineroBottom() {
  var fromCurrency = document.getElementById("from").value;
  var toCurrency = document.getElementById("to").value;


fetch("https://api.exchangeratesapi.io/latest?base=" + fromCurrency)
  .then((resp) => resp.json())
  .then(function(data){
    (fromCurrency===toCurrency) ? 
    document.getElementById("toQuantity").value = document.getElementById("fromQuantity").value :
    document.getElementById("toQuantity").value = data.rates[toCurrency]*document.getElementById("fromQuantity").value;

  })
    .catch(function(error) {
    console.log(error);
    });
}



function convertDineroTop() {
    var fromCurrency = document.getElementById("from").value;
  var toCurrency = document.getElementById("to").value;


        fetch("https://api.exchangeratesapi.io/latest?base=" + toCurrency)
    .then((resp) => resp.json())
  .then(function(data){
  //if both currencies are the same return identical values
        (toCurrency===fromCurrency) ?
         document.getElementById("fromQuantity").value = document.getElementById("toQuantity").value :
        //otherwise return the top value as the multiplication of top currency rate by the amount specied below
            document.getElementById("fromQuantity").value = data.rates[fromCurrency]*document.getElementById("toQuantity").value;

  })
    .catch(function(error) {
    console.log(error);
    });
}

$(function() {

              var selectBox = $("select").selectBoxIt();

            });

jquery

html

css

selectboxit

回答 1

Stack Overflow用户

发布于 2019-08-20 01:34:20

css经常会发生冲突。无论何时发生这种情况，您都有一些选择，尽管它们都等同于一件事:比糟糕的css更强大。

要做到这一点，最好的方法是更具体：

span {
  display: inline-block;
  background: red;
  height: 30px;
  width: 30px;
}

div span {
  background: blue;
}

div > span {
  background: green;
}

<span></span>

<div>
  <h1><span></span></h1>
  <span></span>
</div>

在上面的示例中，span是最不具体的，div span是更具体的，而div > span是最具体的。找出令人不快的css有多具体，并且比它更具体。

或者，使用!important，但并不建议这样做。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57559604

复制

相似问题

问SelectBoxIt与CSS文件冲突
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SelectBoxIt与CSS文件冲突EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SelectBoxIt与CSS文件冲突
EN