可能重复:
使用CSS更改输入的HTML5占位符颜色
例如,我有这个:
<input type='search' placeholder='Search' name='q' />
Run Code Online (Sandbox Code Playgroud)
如何用CSS设置占位符的样式?默认情况下它是灰色的,但我希望它是黑色的.我必须使用JavaScript吗?
在我的CSS中,我为一个类定义了一个过渡.出于某种原因,当我将鼠标悬停在具有转换的类上时,由于transition-duration某种原因会改变其他地方的字体颜色(表单占位符和某些链接).(就我所知,这只发生在Safari中.)
这是一个jsFiddle,显示我在说什么:
有谁知道为什么会这样,我怎么能阻止它?
我有一个带输入字段的表单.每个输入字段都有一个占位符属性.还有一个链接显示同一表单的可打印版本.
我的问题是,如果我保持占位符属性不变并且输入字段为空,则实际打印占位符,这不是很好.
我正在寻找一种解决这种不幸行为的方法.现在,我唯一能想到的是在javascript中遍历DOM并在给出可打印版本时删除所有占位符属性.当然,在恢复到正常页面视图时,也必须恢复占位符属性.
这并不难,但也不是很优雅.我想知道是否有更好的解决方案.
我有以下HTML:
<form>
<table border="1">
<tr>
<td>Traveler's name:</td>
<td>
<input type="text" id="travelername" placeholder="Last Name, First Name, Middle Initial"/>
</td>
</tr>
<tr>
<td>Traveler's E-mail:</td>
<td>
<input type="email" id="traveleremail"/>
</td>
</tr>
</table>
</form>
Run Code Online (Sandbox Code Playgroud)
我希望占位符val始终完全可见,但它不是:
我尝试添加这个CSS:
input[placeholder] {
font-size: 0.6em;
}
Run Code Online (Sandbox Code Playgroud)
...但是,虽然这会令人钦佩地缩小字体大小,但文本会被截断:
我尝试像这样添加到CSS:
input[placeholder] {
font-size: 0.6em;
width: 500;
}
Run Code Online (Sandbox Code Playgroud)
...但是在输入文本中扩展/扩展占位符的文本区域没有任何作用(输入文本足够宽以容纳缩小的文本,但它本身仍然被压缩成一个太小的区域).
如何实现这一目标?
阅读SO帖子" 用CSS更改输入的HTML5占位符颜色 "我想我理解如何使用外部CSS.
即使在搜索谷歌和搜索引擎优化后,我发现没有办法使这也适用于内联CSS(我知道应该避免使用内联CSS).
例如:
<input type="text" placeholder="Enter something" style="???" />
Run Code Online (Sandbox Code Playgroud)
对于该???部分,我不知道输入什么以更改占位符文本的颜色.
所以我的问题是:
是否可以使用内联CSS来更改占位符文本的颜色?如果是的话,该怎么办?
我在Bootstrap网站上有一个简单的表单,但是在白色背景上不是基本的灰色文本,而是在灰色背景上需要白色文本.我能够处理灰色背景,但我似乎无法更改占位符或输入文本颜色.
一点JSFiddle动作.
这是我的HTML标记:
<div class="span6" id="email-form">
<form name="contact-form" id="contact-form" method="post" action="form-processing.php">
<input class="span6" name="Name" id="Fname" type="text" placeholder="Your name" required>
<input class="span6" name="Email" id="Email" type="email" placeholder="Your email" required>
<textarea class="span6" name ="Message" id="Message" type="text" rows="10" placeholder="What services will you be requiring?" required></textarea><br>
<button type="submit" class="btn btn-primary">Send</button>
<button type="clear" class="btn">Clear</button>
</form><!--/.span6-->
</div><!--/#email-form-->
Run Code Online (Sandbox Code Playgroud)
这是我尝试的CSS,背景颜色更改工作,但不是占位符或文本.
#Email, #Fname, #Message{
background-color:#666;
}
#Email placeholder, #Fname placeholder, #Message placeholder{
color:#FFF;
}
#Fname text{
color:#FFF;
}
Run Code Online (Sandbox Code Playgroud) 我想将颜色设置为占位符,将字体样式更改为粗体,并增加大小.
我怎样才能做到这一点?我应该给占位符提供样式,还是有其他方法可以实现这个目的吗?我想在下面的结果中设置颜色并更改字体样式以适用于所有浏览器中的选择大小.
<!doctype html>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
.k-dropdown-wrap{
border-width: 5px !important;
border-color: #D8D3D3 !important;
}
}
</style>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<div id="example" role="application">
<div id="tshirt-view" class="demo-section k-content">
<select id="size" placeholder="Select City..." style="width: 300px;" >
<option />
<option />Newyork
<option />Hyderabad
<option />Bangalore
<option />Kolkata
<option />Delhi
</select>
</div>
<script>
$(document).ready(function() {
// create ComboBox from input HTML element
// create ComboBox …Run Code Online (Sandbox Code Playgroud)是否可以为输入占位符和值设置不同的字体?我需要为输入占位符和值设置不同的字体,因为它们使用不同的语言.占位符使用正确的tonleft语言,但vakue使用英语.CSS3有可能吗?
我有这样的元素<input type="text" placeholder="lorem ipsum">.
如何placeholder在CSS中设置此属性的样式,以便它适用于所有浏览器?
css ×9
html ×7
placeholder ×6
html5 ×4
css3 ×3
html-input ×2
input ×1
javascript ×1
printing ×1