小编Bur*_*ler的帖子

Css伪类输入:not(禁用)not:[type ="submit"]:focus

我想为输入元素应用一些css,我想只对未被禁用且不是提交类型的输入执行此操作,下面的css不起作用,也许如果有人可以解释我必须如何添加它.

input:not(disabled)not:[type="submit"]:focus{
box-shadow:0 0 2px 0 #0066FF;
-webkit-box-shadow:0 0 4px 0 #66A3FF;
}
Run Code Online (Sandbox Code Playgroud)

css css-selectors pseudo-class

121
推荐指数
3
解决办法
10万
查看次数

由于滚动,响应表内的引导按钮下拉不可见

当响应和滚动活动时,表格内的下拉按钮出现问题,因为overflow: auto;属性导致下拉列表不可见.我如何修复它以便在折叠时显示按钮的下拉选项?我可以使用一些jQuery,但在我左右滚动问题后,我决定找到另一个解决方案.我附上照片以便更好地理解.在此输入图像描述

这是一个小小的小提琴:

javascript css jquery overflow twitter-bootstrap

73
推荐指数
12
解决办法
8万
查看次数

IE8的边界半径

我在IE8上有一个边界半径的问题,到现在为止我使用了pie.js,但我不推荐这个js库,因为它是错误的.如果你有一个没有多少html页面的小网站,那么使用该库是可以的,但如果你有一个繁重的应用程序,其中使用了许多不同的框架,那么就不可能使用它.CurvyCorners或其他大型库的相同行为.

因此,如果任何人都可以帮助我使用一个小的jQuery或javascript插件来做IE 8上的border-radius,我将感激生命.

javascript css jquery css3 internet-explorer-8

35
推荐指数
4
解决办法
8万
查看次数

Bootstrap下拉复选框选择

我正在尝试使用复选框自定义引导下拉列表,如果我从下拉列表中选中一个复选框,则我希望在输入下拉列表中写入标签名称,并在关闭;时用上传图片分隔dropdown.

这是一个小提琴的例子.

在此输入图像描述

html javascript css jquery twitter-bootstrap

27
推荐指数
2
解决办法
7万
查看次数

Bootstrap导航栏折叠自定义宽度的媒体查询

Helo伙计们,我想修改导航栏以便崩溃@screen-md :992px;.我已修改navbar.less,但仍然无法工作,我不知道该怎么做.

那么如何修改@grid-float-breakpoint变量以便在自定义媒体查询大小上折叠该菜单?

小提琴:

css media-queries twitter-bootstrap twitter-bootstrap-3

15
推荐指数
1
解决办法
5万
查看次数

在悬停时显示下拉菜单,仅使用CSS关闭

有人可以帮我解释为什么当我点击它们时,下拉菜单中的链接无效吗?也许是因为指针事件?我正在尝试在单击链接或单击关闭按钮后关闭下拉菜单.我添加了一些很酷的东西,比如单击链接时隐藏父容器.

有很多选择:

  1. 使用:focus但是当使用焦点时,下一个悬停在下拉列表中不会触发下拉列表.

  2. :active在容器上使用并pointer-events仅指向活动链接,但指针事件是错误的

  3. 使用:target但具有相同的问题:焦点,不会触发第二个胡佛.

body {
    padding: 20px;
}
.container {
    border: 1px solid lime;
    padding: 10px;
    width: 200px;
}
.test1 {
    display: none;
    border: 1px dashed orange;
    background: green;
    padding: 10px;
    pointer-events: none;
}
.container:hover .test1 {
    display: inline-block;
}
.container:hover .test1:active {
    display: none;
}
a {
    pointer-events: auto;
    color: lime;
    font-weight: bold;
}
Run Code Online (Sandbox Code Playgroud)
<ul class="container">
	 Drop down menu
	<li class="test1">
	<a class="dropdown" href="#">X Close</a>
	<ul class="content">
		 CLOSE THIS CONTENT …
Run Code Online (Sandbox Code Playgroud)

html css html5 css3 pointer-events

13
推荐指数
1
解决办法
1万
查看次数

Chrome默认焦点大纲

我正在尝试删除默认焦点froom chrome,它适用于outline:none; 同时我想添加一个box-shadow但它不适用于select.

*:focus { outline:none; }

input[type="text"]:focus,input[type="checkbox"]:focus,input[type="password"]:focus,
select:focus, textarea:focus,option:focus{
box-shadow:0 0 2px 0 #0066FF;
-webkit-box-shadow:0 0 9px 0 #86AECC;
z-index:1;
}
Run Code Online (Sandbox Code Playgroud)

小提琴:http://jsfiddle.net/DCjYA/309/

google-chrome focus outline

5
推荐指数
1
解决办法
1万
查看次数

一个href"#"无法使用:专注于firefox浏览器

我有这个菜单,我自定义使用它像选择.它工作得很好,即,Chrome,但在Firefox上无法正常工作.正常行为是:当焦点扩展菜单时,会显示链接(帮助和注销),如果单击它们,将在同一浏览器的其他页面中重定向.firefox上的错误行为:菜单si在焦点上扩展但链接(hep和logoff)不重定向.

    <ul id="main">
                <li class="username" tabindex="1" >  <a>USER</a>
                    <ul class="curent_buser">
                        <li class="ai"><a class="jaximus"href="http://en.wikipedia.org/wiki/Wiki">Help</a></li>
<li class="aj"><a class="jaximus" href="http://en.wikipedia.org/wiki/Wiki" name="logoff">Log Off</a></li>                </ul>
                </li>
            </ul>
Run Code Online (Sandbox Code Playgroud)

为什么要这个firefox ??? 我有ff的最后一个版本:|

这是一个小提琴的例子:http://jsfiddle.net/RwtHn/1152/

html css html5 css3

5
推荐指数
1
解决办法
1002
查看次数

所有4个边距(顶部,右侧,底部,左侧)的混合量较少

我怎样才能将这个css写成一个自动生成所有类的less mixin:

  .class1x{margin-top:1px;}
  .class2x{margin-right:1px;}
  .class3x{margin-bottom:1px;}
  .class4x{margin-left:1px;}
===========================================
  .class1y{margin-top:2x;}
  .class2y{margin-right:2px;}
  .class3y{margin-bottom:2px;}
  .class4ymargin-left:2px;}    
===========================================
  .class1n{margin-top:n..px;}
  .class2n{margin-right:n..px;}
  .class3n{margin-bottom:n..px;}
  .class4nmargin-left:n..px;}  
Run Code Online (Sandbox Code Playgroud)

并增加该类和值,例如,直到值为100px.我有这个少,但我不想为每个css属性繁殖:

@iterations: 30;
.loopingClass (@index) when (@index > 0) {
  .classx@{index} { /*classx the class to add in html*/
    margin: ~"@{index}px"; 
  }
  .loopingClass(@index - 1);
}
.loopingClass (0) {}
.loopingClass (@iterations); 
Run Code Online (Sandbox Code Playgroud)

TY.

html javascript css jquery less

5
推荐指数
2
解决办法
2547
查看次数

HTML中元素的排列

是否可以使用html + css实现此结构?

但是,我不想在橙色块之间留有垂直空间,我想成为另一个块的顶部。

我使用过flex和grid但到目前为止还没有真正成功:(

jsfiddle:

.container {
  padding: 10px;
  border: 1px solid red;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.big {
  width: calc(60% - 22px);
  padding: 10px;
  background: lime;
  height: 100px;
  margin-bottom: 10px;
}

.small {
  width: calc(40% - 22px);
  height: 100px;
  padding: 10px;
  background: orange;
  margin-bottom: 10px;
}
Run Code Online (Sandbox Code Playgroud)
<div class="container">
  <div class="big"> I AM BIG 1</div>
  <div class="small"> I AM SMALL 1</div>
  <div class="big"> I AM BIG 2</div>
  <div class="big"> I AM BIG 3</div>
  <div class="big"> …
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox css-grid

2
推荐指数
1
解决办法
87
查看次数