调整html表单文本框大小的CSS属性(如果有的话)是什么？
调整html表单文本框大小的CSS属性(如果有的话)是什么？
提问于 2013-12-20 17:45:47
我希望应用光标样式到文本框上的调整大小工具的抓地力上。当前，当您悬停在该框上时，我有一个cursor: text;属性，当我在调整大小的抓地力上悬停时，我希望能够更改为另一个光标。
这是密码，我知道这不重要。只是想把它当作参考。
<div id="form-box">
<form action="<?php htmlspecialchars(fonefinder.php);?>" method="post" />
<p>Enter The Number</p>
<div class="number-box">
<input type="number" pattern="[0-9]*" size="10" name="number" />
</div>
<h3 class="error"><?php echo $numberErr;?></h3>
<p>Enter Your Message</p>
<textarea name="message"></textarea>
<h3 class="error"><?php echo $messageErr;?></h3>
<div class="submit-btn">
<input type="submit" value="Send Message">
</div>
</form>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2013-12-20 19:05:25
没有这样的属性，但是您可以使用一点JavaScript和jQuery来伪造它。
现场演示
var $textareas = $('textarea');
$textareas.on('mousemove', function (event) {
var threshhold = 5;
var $container = $(event.currentTarget);
var width = $container.width();
var height = $container.height();
var x = event.offsetX;
var y = event.offsetY;
if (
width - x <= threshhold
&& height - y <= threshhold
) {
$container.addClass('resize');
} else {
$container.removeClass('resize');
}
});
$textareas.on('mouseout', function (event) {
$(event.currentTarget).removeClass('resize');
});然后，在CSS中，只需根据类设置游标属性：
.resize {
cursor: nwse-resize;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20709186
复制相关文章
相似问题
腾讯云开发者
