Javascript 纯css关闭按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10019797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pure css close button
提问by qwertymk
回答by Mike Robinson
I spent more time on this than I should have, and haven't tested in IE for obvious reasons. That being said, it's pretty much identical.
我花在这上面的时间比我应该花的时间多，并且出于明显的原因没有在 IE 中进行测试。话虽如此，这几乎是相同的。
a.boxclose{
float:right;
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
color: #fff;
border: 1px solid #AEAEAE;
border-radius: 30px;
background: #605F61;
font-size: 31px;
font-weight: bold;
display: inline-block;
line-height: 0px;
padding: 11px 3px;
}
.boxclose:before {
content: "×";
}
回答by Craig Wayne
My attempt at a close icon, no text
我尝试关闭图标，没有文字
.close-icon
{
display:block;
box-sizing:border-box;
width:20px;
height:20px;
border-width:3px;
border-style: solid;
border-color:red;
border-radius:100%;
background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%);
background-color:red;
box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
transition: all 0.3s ease;
}<a href="#" class="close-icon"></a>回答by Chris Purves
I become frustrated trying to implement something that looked consistent in all browsers and went with an svg button which can be styled with css.
试图实现在所有浏览器中看起来一致的东西并使用可以用 css 设置样式的 svg 按钮时，我感到很沮丧。
html
html
<svg>
<circle cx="12" cy="12" r="11" stroke="black" stroke-width="2" fill="white" />
<path stroke="black" stroke-width="4" fill="none" d="M6.25,6.25,17.75,17.75" />
<path stroke="black" stroke-width="4" fill="none" d="M6.25,17.75,17.75,6.25" />
</svg>
css
css
svg {
cursor: pointer;
height: 24px;
width: 24px;
}
svg > circle {
stroke: black;
fill: white;
}
svg > path {
stroke: black;
}
svg:hover > circle {
fill: red;
}
svg:hover > path {
stroke: white;
}
回答by binarious
Basic idea: For the a.boxclose:
基本思想：对于 a.boxclose：
border-radius: 40px;
width:20px;
height 10px;
background-color: #c0c0c0;
border: 1px solid black;
color: white;
padding-left: 10px;
padding-top: 4px;
Adding a "X" to the content of the close box.
在关闭框的内容中添加“X”。
Quick and dirty, but works.
又快又脏，但有效。
回答by Rohit Azad
Hi you can used this code in pure css
嗨，您可以在纯 css 中使用此代码
as like this
像这样
css
css
.arrow {
cursor: pointer;
color: white;
border: 1px solid #AEAEAE;
border-radius: 30px;
background: #605F61;
font-size: 31px;
font-weight: bold;
display: inline-block;
line-height: 0px;
padding: 11px 3px;
}
.arrow:before{
content: "×";
}
HTML
HTML
<a href="#" class="arrow">
</a>
? Live demo http://jsfiddle.net/rohitazad/VzZhU/
回答by Selvakumar Arumugam
Edit:Updated css to match with what you have..
编辑：更新了 css 以匹配您所拥有的 ..
HTML
HTML
<div>
<span class="close-btn"><a href="#">X</a></span>
</div>
CSS
CSS
.close-btn {
border: 2px solid #c2c2c2;
position: relative;
padding: 1px 5px;
top: -20px;
background-color: #605F61;
left: 198px;
border-radius: 20px;
}
.close-btn a {
font-size: 15px;
font-weight: bold;
color: white;
text-decoration: none;
}
回答by Ikrom
You can create close(or any) button on http://www.cssbuttongenerator.com/. It gives you pure css value of button.
HTML
您可以close在http://www.cssbuttongenerator.com/上创建（或任何）按钮。它为您提供按钮的纯 css 值。
HTML
<span class="classname hightlightTxt">x</span>
CSS
CSS
<style type="text/css">
.hightlightTxt {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
}
.classname {
-moz-box-shadow:inset 0px 3px 24px -1px #fce2c1;
-webkit-box-shadow:inset 0px 3px 24px -1px #fce2c1;
box-shadow:inset 0px 3px 24px -1px #fce2c1;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
background-color:#ffc477;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0px;
border:1px solid #eeb44f;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:28px;
font-weight:bold;
font-style:normal;
height:32px;
line-height:32px;
width:32px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #cc9f52;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
background-color:#fb9e25;
}.classname:active {
position:relative;
top:1px;
}</style>
/* This button was generated using CSSButtonGenerator.com */
回答by Nick Saemenes
The disappointing thing here is that the "X" isn't transparent (which is how I would likely create a PNG, at least).
令人失望的是，“X”不是透明的（至少我可能会这样创建 PNG）。
I put together this quick test. http://jsfiddle.net/UM3a2/22/embedded/result/which allows you to color the positive space while leaving the negative space transparent. Since it is made entirely of borders it is easy to color since border-color defaults to the text color.
我把这个快速测试放在一起。 http://jsfiddle.net/UM3a2/22/embedded/result/它允许您为正空间着色，同时使负空间透明。由于它完全由边框组成，因此很容易着色，因为边框颜色默认为文本颜色。
It doesn't fully support I.E. 8 and earlier (border-radius issues), but it degrades to a square fairly nicely (if you're okay with a square close button).
它不完全支持 IE 8 及更早版本（边界半径问题），但它可以很好地降级为正方形（如果您可以使用正方形关闭按钮）。
It also requires two HTML elements since you are only allowed two pseudo elements per selector. I don't know exactly where I learned this, but I think it was in an article by Chris Coyier.
它还需要两个 HTML 元素，因为每个选择器只允许使用两个伪元素。我不知道我是从哪里学到的，但我认为是在 Chris Coyier 的一篇文章中。
<div id="close" class="arrow-t-b">
Close
<div class="arrow-l-r"> </div>
</div>
#close {
border-width: 4px;
border-style: solid;
border-radius: 100%;
color: #333;
height: 12px;
margin:auto;
position: relative;
text-indent: -9999px;
width: 12px;
}
#close:hover {
color: #39F;
}
.arrow-t-b:after,
.arrow-t-b:before,
.arrow-l-r:after,
.arrow-l-r:before {
border-color: transparent;
border-style: solid;
border-width: 4px;
content: "";
left: 2px;
top: 0px;
position: absolute;
}
.arrow-t-b:after {
border-top-color: inherit;
}
.arrow-l-r:after {
border-right-color: inherit;
left: 4px;
top: 2px;
}
.arrow-t-b:before {
border-bottom-color: inherit;
bottom: 0;
}
.arrow-l-r:before {
border-left-color: inherit;
left: 0;
top: 2px;
}
回答by o.v.
Just a thought - if you're not targeting IE7, you could get away with any image being base64-encoded and embedded into css. I'm assuming your goal is to avoid an unnecessary http request rather than to actually make a css button as its own goal.
只是一个想法 - 如果您不针对 IE7，您可以使用base64 编码并嵌入到 css 中的任何图像。我假设您的目标是避免不必要的 http 请求，而不是实际将 css 按钮作为自己的目标。
回答by Beth Budwig
If you want pure css, without the letter "x"....
如果你想要纯 css，没有字母“x”....
Here are some awesome experimental icons that include an "x" in a circle that is made with CSS: http://nicolasgallagher.com/pure-css-gui-icons/demo/
这里有一些很棒的实验性图标，在用 CSS 制作的圆圈中包含一个“x”：http: //nicolasgallagher.com/pure-css-gui-icons/demo/
