Question

我尝试使用不同的字体和透明背景制作自定义TextBox（输入），我发现了两篇关于如何编辑输入字体系列并使背景透明的帖子。

Is background-color:none valid CSS? Why doesn't <input> inherit the font from body?

但我正在尝试

HTML：

<div id='test' class='menuInput' style='background-color:blue;' onClick='alert("Test");'><input type="text"></div>

CSS：

input,.menuInput{
    margin-top:10px;
    text-align:center;
    font-size:35px;
    margin:0px auto;
    font-family:FixedSys;
    padding-bottom:6px;
    height:35px;
    border:2px solid black;
    width:400px;
    background-color:transparent;
    color:white;
    margin-bottom:15px;
}

但它不起作用？背景颜色仍然是白色，字体系列也没有改变

编辑：感谢您的回答，但它仍然无法正常工作？我试过了

.menuInput input[type="text"]{
    margin-top:10px;
    text-align:center;
    font-size:35px;
    margin:0px auto;
    font-family:FixedSys;
    padding-bottom:6px;
    height:35px;
    border:2px solid black;
    width:400px;
    background-color:green;
    color:white;
    margin-bottom:15px;
}

它还没有用？

我确定我有这种字体，因为我将它用于别的东西！

Answer 1

尝试这样的事情：

.menuInput input[type=text]{
background:rgba(255,255,255,.5);
color:#000;
font:12px bold "..";
}

Answer 2

jsFiddle

我删除了您在HTML中提到的样式并检查透明度，设置：

body{
    background-color: yellow;
}

在我看来，你的字体不标准。请提供相应的路径。

Answer 3

输入文字的背景颜色不透明，而且为蓝色，因为您给出的“div”背景颜色为蓝色，与输入标签重叠。

<div id='test' class='menuInput' style='background-color:blue;' onClick='alert("Test");'>  
     <input type="text"/>
</div>

下面是正在运行的代码，它也接受font-family。可能有一些字体系列可能不被接受。所以检查使用不同的font-family。我使用过“Courier and Arial”，它正在接受第一个。

HTML:
 <div id='test' class='menuInput'>
     <input type="text" />
 </div>

CSS:
input,.menuInput{
    margin-top:10px;
    text-align:center;
    font-size:35px;
    margin:0px auto;
    font-family:Courier,Arial;
    padding-bottom:6px;
    height:35px;
    border:2px solid black;
    width:400px;
    background-color:transparent;
    color:black;
    margin-bottom:15px;
}

Answer 4

神圣的家伙们我很抱歉，但问题是我确实只将div放在.html中并忘记了html头部和身体标签

<强> = _ =

总Noob-Out那里

Answer 5

HTML

<div id='test' class='menuInput'>
<input type="text" class="test1"/>
</div>

CSS

.menuInput{
    background-color:yellow;
}

input.test1{
    margin-top:10px;
    text-align:center;
    font-size:35px;
    margin:0px auto;
    padding-bottom:6px;
    height:35px;
    border:2px solid black;
    width:400px;
    background-color:transparent;
    color:red;
    margin-bottom:15px;
    font-family:Arial,Helvetica,sans-serif;
}

带输入标签的自定义TextBox

5 个答案: