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 Chriss Miller 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
Joined
Aug 11, 2004
Messages
108
Location
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 Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
1K
bdwilcox
bdwilcox
soni21
  • Locked
  • Question Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip Helpful tip
Solution to CSS Two Level Horizonal Menu
Replies
1
Views
1K
pmonett
pmonett
Mike Lewis
  • Locked
  • Question Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
2K
Mike Lewis
Mike Lewis
jizzer
  • Locked
  • Question Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top