Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Color turns 2D to 3D 1

Status
Not open for further replies.
daveask

daveask

Programmer
Aug 11, 2004
108
GB
Hi,

This simple code shows how the color affected the input element in FireFox!! The 'class=="color1"' made the input element become 3D. It is 2D if there is no 'class=="color1"'.

Can you tell me why and how to set the background color of the input element (by css) with it remains 2D?

<html>
<head>
<style type="text/css">
<!--
.color1 {background-color: #aabbcc;}
-->
</style>
<body>

<form>
<input type="text" class="color1";> The 'class=...' made the input element become 3D. Without it, the input element will is 2D.
</form>

</body>
</html>
 
Sort by date Sort by votes
Code: 
input {
    background-color: red;
}

input.color1 {
    background-color: #aabbcc;
}

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
I have just tested what you suggested with no success:
<html>
<head>
<style type="text/css">
<!--
input {background-color: red;}
-->
</style>
</head>
<body>

<form>
<input type="text"> The input element is still 3D!!!
</form>

</body>
</html>
 
Upvote 0 Downvote
what? 1) what are you trying to achieve and 2) what do you mean "3d"?

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
I need to set the background color of the input element (by css) with it remains 2D. I don't want 3D.
3D means 3 dimentional looking.
If you try my code under FireFox, you will see my problem.
 
Upvote 0 Downvote
Yes, I am very well aware of what three dimensional means, just not what you mean in this particular circumstance. I can now only assume you're talking about borders, which can be changed with additional css:

Code: 
input { border: none; }
or
Code: 
input { border: 1px solid black; }


*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
so here's your css:

Code: 
<style type="text/css">
<!--
.color1 {
  background-color: #aabbcc;
  border: 1px solid black;
}
-->

and get rid of that semi-colon in your input tag.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
I tyied that befor....I have just tested again....you didn't try :)
If we use border: 1px..., the element is indeed 2D, fine. However, the background color became white no matter what color you setted........
 
Upvote 0 Downvote
actually, you are wrong, I DID try. You are obviously missing some very fundamental understandings of CSS. The way I have the CSS above, your simple tiny HTML code works perfectly fine, looks "2D" and has a gray background color.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
And here is my "homework", proving that I tried:

Code: 
<html>
<head>
<style type="text/css">
<!--
.color1 {
    background-color: #aabbcc;
    border: 1px solid black;
}
-->
</style>
<body>

<form>
<input type="text" class="color1" /> The 'class=...' made the input element become 3D. Without it, the input element will is 

2D.
</form>

</body>
</html>

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
I will try that....
Can you tell me what I am missing?
 
Upvote 0 Downvote
Yes, yours is working!
I then checked and found what I did almost the same with yours but without success :

<html>
<head>
<style type="text/css">
<!--
.color1 {
background-color: #aabbcc;
border: 1px double black; Do you think 'double' is wrong?
}
-->
</style>
<body>

<form>
<input type="text" class="color1" />
</form>

</body>
</html>
 
Upvote 0 Downvote
well, double means two borders. The smallest amount of space you can allot for 2 borders is 3px. Therefore, use this:

Code: 
.color1 {
    background-color: #aabbcc;
    border: 3px double black;
}

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]
 
Upvote 0 Downvote
Yes, that is correct and I believe you solved my problem!
Merry Xmas!
 
Upvote 0 Downvote
thanks, you too.

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
761
bdwilcox
bdwilcox
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
816
pmonett
pmonett
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top