那些遇到过的问题

小编web*_*.ic的帖子

在选择之后添加 svg-icon（箭头）

您好，我正在设计一个跨浏览器选择，以便在 chrome、IE、ff 和 safari 浏览器中具有与我的下拉菜单相同的设计。这很好用！我使用了以下代码：

label {
  font-family: Arial;
}

select {
  transition: border-color ease-in-out 0.15s;
  background: transparent;
  border: 1px solid $BORDER_COLOR;
  outline: 0;
  padding: 5px;

  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;

  -webkit-appearance: none;
  -moz-appearance: radio-container;
  appearance: none;
}
Run Code Online (Sandbox Code Playgroud) 
<body>
  <label>City</label>
  <select>
    <option>Zurich</option>
    <option>Vienna</option>
    <option>Berlin</option>
  </select>
</body>
Run Code Online (Sandbox Code Playgroud)

我现在想念的是一个箭头图标，它表明这是一个下拉菜单（像往常一样）。我还想添加我的服装图标 (svg)。我用这个CSS尝试过：

background: url("arrow_down_grey.svg") no-repeat center right;
Run Code Online (Sandbox Code Playgroud)

箭头位于正确的位置（右中心）并且具有正确的大小，但前提是选择的宽度足够大。当选择不够长时，图标位于文本内，如下所示：

在此输入图像描述

我现在的想法是将其添加到我选择的伪“之后”中。我在互联网上找到的每个教程都没有真正起作用。有人能帮我吗？

谢谢！

css background css-selectors

web*_*.ic
2016 05-21
2
推荐指数
1
解决办法
5873
查看次数

用高图中的垂直线连接两个不同的值

嗨，我正在为我的网站寻找一个好的图表插件。我找到了 highcharts，它解决了我的大部分需求。现在我用这个插件构建了如下图表：

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Connect Values'
        },
        subtitle: {
            text: 'Value 1 and Value 2'
        },
        xAxis: [{
            categories: ['24.05.2015', '01.06.2015', '12.06.2015', '19.06.2015', '25.06.2015'],
            crosshair: true
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: 'Value 1',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Value 2',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: …
Run Code Online (Sandbox Code Playgroud)

jquery charts highcharts

web*_*.ic
2016 06-14
1
推荐指数
1
解决办法
1171
查看次数

使用push()将两个数组合并为一个

我有以下代码:

list1 = {
    Items: [
        {
            ID: 1,
            Name: "Zurich"
        },
        {
            ID: 2,
            Name: "London"
        },            {
            ID: 3,
            Name: "New York"
        }
    ]
};

list2 = {
    Items: [
        {
            ID: -1,
            Name: "Dummy"
        },
        {
            ID: 0,
            Name: "Dummy2"
        }
    ]
};

list1.push(list2);
Run Code Online (Sandbox Code Playgroud)

我希望得到以下结果:

列表1:

  • 0:对象(苏黎世)
  • 1:对象(伦敦)
  • 3:对象(纽约)
  • 4:对象(虚拟)
  • 5:对象(Dummy2)

但是我得到了这个:

列表1:

  • 0:对象(苏黎世)
  • 1:对象(伦敦)
  • 2:对象(纽约)
  • 3:对象(项目)
    • 0:对象(虚拟)
    • 1:对象(Dummy2)

我怎样才能得到我的预期结果？

谢谢和欢呼.

javascript jquery push object

web*_*.ic
2016 06-17
1
推荐指数
1
解决办法
901
查看次数

自定义 dxChart 中的工具提示

我正在使用 DevExtreme 的 dxchart 迈出第一步。目前我有以下代码：

\n\n

HTML：

\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset="utf-8" />\n        <title>DevExtreme Chart</title>\n        <!--FRAMEWOKR-->\n        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>\n        <script src="./lib/globalize.min.js"></script>\n        <script src="./lib/dx.charts.js"></script>\n        <!--JS-->\n        <script type="text/javascript" src="chart.js"></script>\n    </head>\n    <body>\n        <div id="chartContainer" style="width:100%; height: 440px"></div>\n    </body>\n</html>\n
Run Code Online (Sandbox Code Playgroud)\n\n

JS：

\n\n
$(document).ready(function(){\n    var dataSource = [\n        {\n            argument: \'15.06.2016\',\n            puls: 102,\n            temperatur: 37.6,\n            weight: 91\n        },\n        {\n            argument: \'16.06.2016\',\n            puls: 99,\n            temperatur: 35.1,\n            weight: 88\n        },\n        {\n            argument: \'17.06.2016\',\n            puls: 87,\n            temperatur: 38.0,\n            weight: 87\n        },\n        {\n            argument: \'18.06.2016\',\n            puls: 91,\n            temperatur: …
Run Code Online (Sandbox Code Playgroud)

javascript charts devexpress tooltip devextreme

web*_*.ic
2017 10-08
1
推荐指数
1
解决办法
4531
查看次数

检测是否使用angularJS按下了“删除”键

嗨，我有以下代码：

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.pressedKey = function(keyObj) {
    $scope.myKey = keyObj.key;
  }
});
Run Code Online (Sandbox Code Playgroud) 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <input ng-keypress="pressedKey($event)"><br>{{myKey}}
</div>
Run Code Online (Sandbox Code Playgroud)

我在输入上使用 ng-keypress 来检测是否有键事件以及单击了哪个键。我需要所有数字和字母以及输入和删除键。现在，数字、字母和回车可以正常工作，但是当我单击删除键时，什么也没有发生。我怎样才能用角度检测它？

谢谢和欢呼。

html keypress angularjs

web*_*.ic
lucky-day
1
推荐指数
1
解决办法
2656
查看次数

img元素上有空格的行 

img:after,
img:before {
  /*POSSIBLE SOLUTION WITH PSEUDO?*/
}
Run Code Online (Sandbox Code Playgroud) 
<img src="https://dummyimage.com/vga">
Run Code Online (Sandbox Code Playgroud)

我必须在img元素的左侧绘制两条垂直线.该线应该有一个width的5px.第一行位于img的左侧.5px直到第二行开始,才会出现另一个空间.

我发现这个解决方案包含span元素:使用CSS绘制3条垂直线和图像

有没有更好的替代解决方案？我尝试使用伪:after, :before但没有得到它.有任何想法吗？

原始图片: 在此输入图像描述

带图像的线条: 在此输入图像描述

html css

web*_*.ic
2017 10-16
1
推荐指数
1
解决办法
59
查看次数

具有不透明性的容器内没有不透明性的文本

我有一个img黑色覆盖层。覆盖层内有一个opacity和一个白色文本。当我将包装器悬停时，opacity可以看到带有不同文本的红色覆盖层。它工作正常。我唯一的问题是，删除opacity叠加层内的文本。文字是白色的，但也是透明的。我该如何管理它，将文本放在透明容器中而不会对字母/文本产生透明效果？我知道，如果我把文本从这个盒子里拿出来并在中心 id 中设置样式它会起作用。但我想在透明容器中包含文本元素。希望这已经足够清楚了。有任何想法吗？

.wrapper {
  position: relative;
  width: 300px;
  height: 200px;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.overlay-black {
  background: black;
  opacity: 0.4;
}

.overlay-red {
  background: red;
  opacity: 0.8;
  display: none;
}

.wrapper:hover .overlay-black {
  display: none;
}

.wrapper:hover .overlay-red {
  display: flex;
}

h2,
p {
  color: white;
}

img {
  width: 100%;
  height: 100%;
} …
Run Code Online (Sandbox Code Playgroud)

html css opacity

web*_*.ic
lucky-day
0
推荐指数
1
解决办法
1383
查看次数

自动换行：断词不适用于带有输入和标签的跨度

我有一个input与type radio. 有一个label周围和一个span内部label。我已经修复width了，span并且正在尝试打破这个说法word-wrap: break-word。它不起作用，但我不知道为什么。如果和周围没有 元素，则相同的规则有效。我不明白为什么。我知道，我也可以只使用and不使用，但这是我必须这样做的方式。有任何想法吗？希望它足够清楚。labelinputspanCSSinputlabelspan

.form__wrapper {
  display: inline-block;
  position: relative;
  width: 600px;
}

.form__label {
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  width: 100%;
}

.form__input {
  position: relative;
}

.form__text,
.breaking-works {
    display: inline-block;
    margin-left: 25px;
    width: calc(600px - 450px);
    word-wrap: break-word;
    border: 1px solid black;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="form__wrapper">
  <label class="form__label" …
Run Code Online (Sandbox Code Playgroud)

html css word-wrap

web*_*.ic
lucky-day
0
推荐指数
1
解决办法
4687
查看次数

标签 统计

css ×4

html ×4

charts ×2

javascript ×2

jquery ×2

angularjs ×1

background ×1

css-selectors ×1

devexpress ×1

devextreme ×1

highcharts ×1

keypress ×1

object ×1

opacity ×1

push ×1

tooltip ×1

word-wrap ×1