0

Hi,

I need to create an inside website messaging system like this.

Email2

I have done the basic via the <div> system. Can I use this system here? And I need to do more development on this basic codings that I have done. That is:

1) When I select the checkbox......the entire checkbox should select via a color
2) How do I reduce the check box a little bit more plus reduce the div height

Here is the CSS file and the coding file I did ;

CSS - style2.css

#holder {
    width: 100%;
    height:inherit
}

#holder > div {
    clear: both;
    padding: 2%;
    margin-bottom: 1px;
    border-bottom: 1px solid #eee;
    float: left;
    width: 96%;
}

label {
    display: inline;
}


.regular-checkbox {
    display: none;

}

.regular-checkbox + label {
    background-color: #fafafa;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
}

.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);

.regular-checkbox:checked + label {
    background-color: #e9ecee;
    border: 1px solid #adb8c0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
    color: #99a1a7;
}}


.regular-checkbox:checked + label:after {
    content: '\2714';
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #99a1a7;
}

===================================================================================================================================

HTML CODING I DID :

<!DOCTYPE HTML>
<html>
<head>

<title>Custom CSS3 Checkboxes and Radio Buttons!</title>
<link rel="stylesheet" type="text/css" href="style2.css" />

<style type="text/css">
<!--
.style1 {color: #eee}
-->
</style>

</head>
<body>

<div id="holder" align="left">
<div style="display:inline;min-height:16px width: px">
      <input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label>
</div>
<div style="display:inline;min-height:16px width: px">
      <input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label>
</div>
<div style="display:inline; min-height:16px width: px">
      <input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label>
</div>
</body>
</html>

Edited by trishfernan: attachment

3
Contributors
5
Replies
6
Views
4 Years
Discussion Span
Last Post by JorgeM
0

So, if you are using just plain HTML, you are going to have quite a bit of challanges to develop a system that the one you desribed. If this is just for an assignment at school, or you simply need to build a presentational model, that's fine.

Also, can you elaborate a bit more on what you mean in these questions...

1) In the first question, what exactly do you mean by "the entire checkbox should select via a color"
2) "How do I reduce the check box a little bit more plus reduce the div height"- do you mean the width and the height?

0

I'm trying to change the background color of the div with a checkbox I've have inserted here. When the checkbox is deselected, I would like the background color to go back to normal (or remove the 'highlight' div)

0

To change the background color, you'll need some client side scripting help. Do you have any experience with JavaScript and/or jQuery? here is a quick example i put together.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  var x=document.getElementById("ckBox");
  var y=document.getElementById("div1");
  if (x.checked) {
    document.getElementById("div1").style.backgroundColor="yellow";
    } else {
    document.getElementById("div1").style.backgroundColor="transparent";
    }
}
</script>
</head>
<body>

Checkbox: <input type="checkbox" id="ckBox" onchange="myFunction()">
<div id="div1">Check/Uncheck to highlight this div</div>

</body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.