Custom TextBox with input tag

Question

I'm trying to make a custom TextBox (input) with a different font and transparent background, I found two posts on how to edit input font family and making backgrounds transparent.

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

But I'm trying

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;
}

But its not working? the background color is still white and the font family hasn't changed either

EDIT: Thanks for the answers, but it still isn't working? I've tried

.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;
}

and its still not working?

I'm sure I have that font since I'm using it for something else!

Testing with the HTML posted and either of the CSS pieces posted does *not* reproduce the problem described in the text. The poster’s own comment posted as an answer shows that the question does *not* contain sufficient information for actually reproducing the issue. — Jukka K. Korpela, May 02 '14 at 04:03

score 0 · Answer 1 · answered May 01 '14 at 05:34

0

Try something like this:

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

answered May 01 '14 at 05:34

G.L.P

7,119
5
25
41

score 0 · Answer 2 · answered May 01 '14 at 05:34

0

jsFiddle

I removed the style that you mentioned in HTML and to check the transparency, set:

body{
    background-color: yellow;
}

Your font is not standard, in my opinion. Please provide the appropriate path to it.

answered May 01 '14 at 05:34

Rahul Desai

15,242
19
83
138

I mean to use `@font-face`. More info: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face OR http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp – Rahul Desai May 01 '14 at 10:55

score 0 · Answer 3 · edited May 01 '14 at 10:07

The background color for your input text is not transparent and it is in blue because you have given the " div" background color blue which overlap the input tag.

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

Below is the code which is working and it is also accepting the font-family. There might be some font-family which might not be accepted. So check using different font-family. I have used " Courier and Arial " and it is accepting the first one.

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;
}

score 0 · Answer 4 · answered May 01 '14 at 23:14

0

Holy Crap guys I'm sorry but the problem was that I literally only put the div in the .html and forgot about html head and body tags

=_=

Total Noob-Out there

answered May 01 '14 at 23:14

Victor Chen

1
4

Prashant · Answer 5 · 2014-05-01T10:07:13.310

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;
}

Custom TextBox with input tag

5 Answers5