-1

我的目标是把这张幻灯片（第三张幻灯片）放在这个网站的评论框中。我采用了原始的 CSS 代码，并替换了类。这是您现在可以实时看到的最终 CSS。

一切似乎都很好，除了标签文本没有出现在复选框旁边。

这里是：

<label class="subscribe-label" id="subscribe-label" for="subscribe_comments" style="display: inline;">Powiadom mnie o kolejnych komentarzach przez email.</label>

上面的粗体文本应显示在复选框旁边。

问题是我无法编辑 html...我只能访问 CSS。在 CSS 中，我已经放置了!important覆盖内联应用的样式。有谁知道实现它是否可行？

Ps这里是一个用于测试的小提琴。

4

1 回答 1

0

您的标签内容需要放在这里：

CSS 中的内容

.ondisplay section::before {
  content:'Powiadom mnie o kolejnych komentarzach przez email.'; 
}

HTML

<div class="ondisplay">
<section>
  <!-- Slide THREE -->
  <div class="slideThree">  
      <input type="checkbox" value="None" id="slideThree" name="check" checked />
      <label for="slideThree"></label>
  </div>
</section>

</div>

CSS

body {
    background: #555;
}

h1, h2 {
    color: #eee;
    font: 30px Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0px 1px black;
    text-align: center;
    margin: 20px 0 50px 0;
}

/* SLIDE THREE */
.slideThree {
    width: 80px;
    height: 26px;
    background: #333;
    margin: 20px auto;

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: relative;

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

.slideThree:after {
    content: 'OFF';
    font: 12px/26px Arial, sans-serif;
    color: #000;
    position: absolute;
    right: 10px;
    z-index: 0;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(255,255,255,.15);
}

.slideThree:before {
    content: 'ON';
    font: 12px/26px Arial, sans-serif;
    color: #00bf00;
    position: absolute;
    left: 10px;
    z-index: 0;
    font-weight: bold;
}

.slideThree label {
    display: block;
    width: 34px;
    height: 20px;

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;

    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    transition: all .4s ease;
    cursor: pointer;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 1;

    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    background: #fcfff4;

    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.slideThree input[type=checkbox]:checked + label {
    left: 43px;
}

input[type=checkbox] {
    visibility: hidden;
}

.ondisplay{
  text-align:center;
  border-bottom:1px solid gray;
  padding:20px 0;
}

.ondisplay section{
  width:100px;
  height:100px;
  background: #555;
  display:inline-block;
  border: 1px solid gray;
  text-align: center;
  margin-top:5px;
  border-radius:5px;
  box-shadow: 0 1px 4px
     rgba(0, 0, 0, 0.3), 0 0 40px
     rgba(0, 0, 0, 0.1) inset;
}

.ondisplay section::before {
  content:'Powiadom mnie o kolejnych komentarzach przez email.'; 
  color: #bbb;
    font: 15px Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0px 1px black;
}

input[type=checkbox] {
    visibility: hidden;
}}

例子

jsFiddle 示例：http: //jsfiddle.net/CXn3v/

于 2013-10-29T22:28:45.543 回答