相关疑难解决方法(0)

使用CSS更改HTML5输入的占位符颜色

Chrome支持占位符属性input[type=text]元素(别人可能做太多).

但以下CSS内容对占位符的值没有任何作用:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
Run Code Online (Sandbox Code Playgroud)
<input type="text" placeholder="Value">
Run Code Online (Sandbox Code Playgroud)

Value仍然会留下grey而不是red.

有没有办法改变占位符文本的颜色?

html css html5 placeholder html-input

3876
推荐指数
29
解决办法
171万
查看次数

在Chrome中使用webkit-transform旋转时,文本消除锯齿功能

我正在使用-webkit-transform: rotate()Chrome 14.0.835.2 dev-m 旋转一个元素,它正在为元素内部的文本做一些非常奇怪的事情.这让我想起了当您使用"平滑"抗锯齿而不是"清晰"旋转文本时,您在Photoshop中获得的类似效果.

谁知道这里发生了什么?它是针对此webkit或Chrome版本的,还是我可以做些什么来修复它?(它也不是列表元素之间边界的抗锯齿)

Wonky文本

这是CSS:

div.right-column.post-it
{
  position: relative;
  width: 240px;
  background-color: #fe9;
  padding: 20px;
  -webkit-transform: rotate(.7deg);
  background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
  box-shadow: 1px 1px 0 #ddccaa, 
            2px 2px 0 #dbcaa8,
            3px 3px 0 #d9c8a6,
            4px 4px 0 #d7c6a4,
            5px 5px 0 #d5c4a2,
            6px 6px 1px #d3c2a0,
            4px 4px 2px rgba(90,70,50,.5),
            8px 8px 3px rgba(90,70,50,.3),
            12px 12px 5px rgba(90,70,50,.1);
}
Run Code Online (Sandbox Code Playgroud)

css webkit rotation webkit-transform

30
推荐指数
2
解决办法
4万
查看次数

CSS3过渡搞乱了webkit中的字体?

自从我添加了一个css过渡(第一个是悬停,第二个是动画)它似乎搞砸了我的字体,它们看起来"不同".

这是完全奇怪的,我已经找了好几个小时,找不到任何东西,我也无法弄清楚它为什么会发生.

在firefox中似乎没问题,但是safari和chrome有问题.

http://www.simplerweb.co.uk

左下方齿轮动画下方的所有内容看起来都像一个较轻的字体重量,导航菜单看起来看起来一样.

我完全迷失在这一个.

这是动画的CSS.

.gearone {height:100px;
width:100px;
top:-10px;
left:-10px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
 -webkit-animation-name:             backrotate; 
    -webkit-animation-duration:        13s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function:linear;


-moz-animation-name: backrotate;
     -moz-animation-duration: 13s;
      -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
}

.geartwo {height:100px;
width:100px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
top:20px;
left:10px;

 -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         13s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function:linear;


    -moz-animation-name: rotate;
     -moz-animation-duration: 13s;
      -moz-animation-timing-function:linear;
    -moz-animation-iteration-count: infinite;

}


@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);

  }
  to { 
    -webkit-transform: rotate(360deg);

  }
}

@-moz-keyframes rotate {
from {

    -moz-transform: rotate(0deg);
  }
  to { …
Run Code Online (Sandbox Code Playgroud)

html css css3 css-transitions css-animations

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