ASP.NET, HTML, PHP, JAVASCRIPT, CSS, ASP, SQL: STYLE SHEET

Showing posts with label STYLE SHEET. Show all posts

Setting TEXTBOX Background Image and Color Using JavaScript & CSS

Consider below textbox:
<input type="text" id="textbox_name" />

Now you can apply BACKGROUND COLOR or BACKGROUND IMAGE using below JAVASCRIPT or CSS
// USING STYLE CSS
.textbox
{
background-color:#FFFFFF;
background:url(images/test.jpg);
}

// USING JAVASCRIPT
function set_background
{
document.getElementById('textbox_name').style.backgroundColor = '#FFFFFF'; document.getElementById('textbox_name').style.backgroundImage="url(images/test.jpg)";
}

To apply COMMON CSS to all Textbox, Radio Button, Checkbox

Below CSS can be used to apply to all TEXTBOX, RADIO BUTTON or CHECK BOX without giving class.

CODE to be implemented in style.css file:

input[type=text]
{
//Here will be property as per requirement.
}

input[type=radio]
{
//Here will be property as per requirement.
}

input[type=checkbox]
{
//Here will be property as per requirement.
}

Same way you can apply CSS to any input type.

How to Get ROUND BOX in Website Designing.

Kindly see the below images. To get the round box you need to CUT box into various pieces as shown in below Image.

HERE I HAVE ALSO SHOWN HOW TO DISPLAY NAME IN BETWEEN. THIS IS OPTIONAL.

Now go with below given code.

CODE:

After applying this, you will get below given Output:

Set OPACITY of image / Div tag.

Set OPACITY of image/Div tag.

~ for IE ~
filter:alpha(opacity=60);
~ CSS standard ~
opacity:0.6;

Consider below example:

<img src="test.jpg" width="150" height="113" alt="Opacity Test"
style="opacity:0.4;filter:alpha(opacity=40)" />

Regular Image:

The same image with transparency:

CSS Transparency Settings for All Browsers..

filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

NOTE:
* opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.

* filter:alpha(opacity=50); This one you need for IE.

* -moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.

* -khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit.

TO USE DIFFERENT STYLE.CSS FOR DIFFERENT BROWSER