获取输入类型=文本看起来像type =密码 [英] Get input type=text to look like type=password

问题描述

我有一个输入 type = text 输入 type = password 仅使用CSS。

I have an input with type=text which I want to show stars like an input with type=password using only CSS.

具有以下输入的形式：

<input type='text' value='hello' id='cake' />

我不是生成表单，我根本没有访问它的HTML。

I'm not generating the form, I don't have access to its HTML at all. I do however have access to CSS applied to the page.

我想要的是它的行为类似 type = password ，即 - 显示用户键入的星形，而不是输入的实际文本。基本上，我想要的方面（用户输入的表示）看起来像一个 type = password 字段。

What I'd like is for it to behave like type=password , that is - to show up stars for what the user typed rather than the actual text being typed. Basically, I'd want that aspect (the presentation of user input) to look like a type=password field.

由于这似乎只是一个演示文稿的问题，我想有一个方法来做到这一点与CSS，因为它在其责任域。然而 - 我没有找到这样的方式。我必须支持IE8 +，但我宁愿有一个解决方案，适用于现代浏览器，只有没有解决方案。

Since this seems like a presentation only issue, I figured there has to be a way to do this with CSS since it's in its responsibility domain. However - I have not found such a way. I have to support IE8+ but I'd rather have a solution that works for modern browsers only over no solution at all. Extra points for preventing copy/paste functionality but I can live without that.

注意：如果不清楚，我无法添加HTML或者JavaScript到页面 - 只有CSS。

Note: In case that was not clear I can not add HTML or JavaScript to the page - only CSS.

（只有我发现的是这个问题，但是它处理一个jQuery相关问题，它有一个JavaScript解决方案）

(Only thing I've found is this question but it's dealing with a jQuery related issue and it has a JavaScript solution)

推荐答案

好像@ThiefMaster建议

Well as @ThiefMaster suggested

input.pw {
    -webkit-text-security: disc;
}

但是，这将工作在浏览器是webkit后代.. Opera，Chrome和

However, this will work in browsers that are webkit descendants.. Opera, Chrome and Safari, but not much support for the rest, another solution to this is using webfonts.

使用任何字体编辑实用程序，例如 FontForge 创建一个包含所有字符 * （或任何你想要的符号）的字体。然后使用CSS网络字体将它们用作自定义字体。

Use any font editing utility like FontForge to create a font with all the characters to be * ( or any symbol you want ). Then use CSS web fonts to use them as a custom font.

这篇关于获取输入类型=文本看起来像type =密码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！