Jump to content
DoyleChris98

Radio Button with CSS

Recommended Posts

What i am trying to do is create 3 items 2 are radio buttons and the other is a check box. I would like to give the 3 of them CSS styles and have them change the background and text color when selected or checked. below is the code and examples.

 

first in the pictures are the layout of the Buttons and Checkbox.

then below is the css style i want them to look like when done.

pay no attention to the label of the css boxes i did that to give a example of selected and unselected.

unselected is black background and green text and selected is the reverse.

<!doctype html><html><head><meta charset="utf-8"><link href="Button.css" rel="stylesheet" type="text/css"></head><body><input type="radio" id="COM1TX" name="COMTX">COM 1 Tx<br><input type="checkbox" id="COMRX" name="COMRX">COM 1,2 Rx<br><input type="radio" id="COM2TX" name="COMTX">COM 2 Tx<br><div><input class="TEST" id="COM" type="button" name="COM" value="COM"><input class="TEST" id="COM2" type="button" name="COM2" value="COM2"></div><div><input class="TEST" id="COM3" type="button" name="COM3" value="COM3"><input class="TEST" id="COM4" type="button" name="COM4" value="COM4"></div>    </body></html>
@charset "utf-8";/* CSS Document */#COM{	width: 150px;	height: 100px;	position: absolute;	top: 100px;	left: 0px;	cursor: crosshair;}#COM2{	width: 150px;	height: 100px;	position: absolute;	top: 200px;	left: 0px;	cursor: crosshair;}#COM3{	width: 150px;	height: 100px;	position: absolute;	top: 100px;	left: 150px;	cursor: crosshair;}#COM4{	width: 150px;	height: 100px;	position: absolute;	top: 200px;	left: 150px;	cursor: crosshair;	color: #000000;	background-color: #00F349;}.TEST{	background-color: #000000;	color: #00F349;	text-align: center;	border: thin solid #00F349;	line-height: 100px;	vertical-align: middle;	font-size: 50px;	cursor:crosshair;}.TEST:active{	background-color: #00F349;	color: #000000;	text-align: center;	border: thin solid #00F349;	line-height: 100px;	vertical-align: middle;	cursor:crosshair;}

post-179939-0-93690500-1424467901_thumb.jpg

Edited by DoyleChris98

Share this post


Link to post
Share on other sites

Are you saying that each of these seven elements can be individually highlighted or un-highlighted?

Share this post


Link to post
Share on other sites

What im saying is, I want the radio and checkbox to look like the buttons in the picture. which with some tinkering around i got it to look the right way before being pressed and after being pressed but i cant get them to move to a new location. example I want the buttons left edge at 840px from the left but i cant get them to move there. but i can make them highlight and unhighlight the right way.

Share this post


Link to post
Share on other sites

Your use of absolute positioning is not a good idea. In your picture the COM4 button is light green. Is it supposed to toggle to dark when clicked?

Share this post


Link to post
Share on other sites

Well absolute is all i know how to use right now, and with the way i have things setup i dont know what to reference for relative postition.

And the COM 4 is the way it would look if it was selected.

This all works with a keypad i made, all the keypad buttons are absolute position and work fine. But i need the Radio Buttons and Check Boxes to turn certain things on and off.

I only need 2 radio buttons and the rest are check boxes.

Share this post


Link to post
Share on other sites

So I don't understand. Do you want something like this?

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>*{margin:0;padding:0;}#panel{border:1px solid black;width:302px;}#coms{width:300px;font-size:0;border:1px solid #19D119;}#coms [type=button]{display:inline-block;width:150px;height:120px;background-color:black;color:#19D119;font-size:48px;border:1px solid #19D119;}#COM1TX{margin-top:40px;}#COM1TX, #COMRX, #COM2TX{margin-left:15px;}#COM2TX{margin-bottom:40px;}</style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+'  Column: '+d);return true;}</script><script>'use strict';var mygreen = null;window.onload = init;function init() {document.getElementById('COM').onclick = comClk;document.getElementById('COM2').onclick = comClk;document.getElementById('COM3').onclick = comClk;document.getElementById('COM4').onclick = comClk;}function comClk(){var lime = '#19D119';if( this.style.backgroundColor == mygreen ){this.style.backgroundColor = 'black';this.style.color = lime;}else{this.style.backgroundColor = lime;mygreen = this.style.backgroundColor;this.style.color = 'black';}}//end of function</script></head><body><div id="panel"><input type="radio" id="COM1TX" name="COMTX"/>COM 1 Tx<br><input type="checkbox" id="COMRX" name="COMRX"/>COM 1,2 Rx<br><input type="radio" id="COM2TX" name="COMTX"/>COM 2 Tx<br><div id="coms"><input class="TEST" id="COM"  type="button" name="COM" value="COM"/><input class="TEST" id="COM2" type="button" name="COM2" value="COM2"/><input class="TEST" id="COM3" type="button" name="COM3" value="COM3"/><input class="TEST" id="COM4" type="button" name="COM4" value="COM4"/></div></div></body>    </html>

Share this post


Link to post
Share on other sites

Well your half right, the color when activated is right. But I would like COM and COM2 set up and radio buttons, so whe you click on COM it lights up but when you click COM 2, COM 2 lights up and COM turns off. Ill attach a picture of how and where i want them to go.

If you look at the picture the line that the arrow is pointing at its at 840px from the left. That is where the buttons will line up from the left and the height from the top will be solved when when the left is figured out. and in the picture there is COM 1 Tx, COM 1,2 Rx, COM 2 Tx. Where COM 1 Tx and COM 2 Tx will be radio buttons and COM 1,2 Rx is like a checkbox.

post-179939-0-62886300-1424734996_thumb.jpg

Share this post


Link to post
Share on other sites

Ok, your screen-grab image looks quite complex. When you have it finished perhaps you can more clearly explain what it is supposed to do.

Share this post


Link to post
Share on other sites

actually <div> tag behave like radio and checkboxes ?

 

Yes and no. Not if the form will be submitted.

Share this post


Link to post
Share on other sites

Because you are limited on changing the design of radio and checkbox, also they are different in each browser, you will probablyy find that divs or anchors are used to produce a better looking design that would more match the websites design with image swapping, or style changing on checking. The radio or checkbox will be hidden in background, and changing the state of being checked would be controlled by javascript.

Share this post


Link to post
Share on other sites

Its used for a game Microsoft Flight Simulator, its for entering radio frequencies from a webpage. you press the keypad buttons (0-9, ., C, B) to enter the frequency in the input box then press the bottom XXX.XXX to enter the frequency, then it enters it into FSX. Also i can open the ATC window with the small buttons next to the input box. And the buttons that i need the Radio and Check Boxes for turn on and shut off the radios. The XXX.XXX show up because i dont have FSX running at the time of the picture. I was using the DIV tags because it was either here or at stackoverflow that somebody told me to use the DIV tag to make the grid layout.

 

post-179939-0-73083400-1424788221_thumb.jpg

post-179939-0-73083400-1424788221_thumb.jpg

Share this post


Link to post
Share on other sites

Anybody with a idea on this.

I wa able to get the Radio Buttons to move but i cant get the checkboxes to Style and also i cant figure out the location with the relative setting. I dont know what the location is relative to.

Share this post


Link to post
Share on other sites

Idea on what? I don't think you have been very clear on what you need or how it needs to function. Are your images showing what you have or what you want?

Share this post


Link to post
Share on other sites

Ok here is the story. Theirs a program that comes with Microsoft Flight Simulator (FSX) called Simconnect which you can right C++ programs to access FSX though Simconnect. A person made a program that accesses Simconnect through a webpage called Websimconnect (Webpage <-> Websimconnect <-> Simconnect <-> FSX). Things that you can do is change Radios, Display your location on google maps from FSX, and many other things. What i'm trying to create is a LCD radio display that you can enter the Frequency and change radios that shows up on a website. I have the keypad layout done but trying to add a few more buttons. The buttons turn on and off the Radios, Which act like a Checkboox and radio buttons.

 

Buttons-2 picture shows the buttons inside FSX, with COM 1 Active COM 2 off with everything else.

Buttons-3 picture shows COM 2 active which shuts off COM 1 (like a Radio Button) and the rest turn on and stay on like a check box.

Pad2 shows the way i would like it to look, where the buttons i want to add are on the left side.

And all the buttons change background and text color when clicked.

 

Hopefully that explains it enough.

post-179939-0-80283500-1425082863_thumb.jpg

post-179939-0-71439100-1425082866_thumb.jpg

post-179939-0-76393000-1425082873_thumb.jpg

Edited by DoyleChris98

Share this post


Link to post
Share on other sites

Ok, but are you saying that these three pictures are three separate keypads that you want to create? Or are you saying you want to combine these three into one keypad? What about the COM buttons you started out with? How many of these buttons are toggle buttons?

Share this post


Link to post
Share on other sites

Alright i through together what it should look like but function isn't all the way there and i have attached a jsfiddle of it to.

In the fiddle i use focus to show the change when active.

COM 1 Tx and COM 2 Tx (with yellow to ID them in the picture) should act like Radio Buttons turn on on the other shuts off.

The rest should act like Check Boxes to turn on and off.

Later they will be calling a function when clicked but thats later.

 

 

https://jsfiddle.net/zxo0myah/

 

Fullscreen

 

https://jsfiddle.net/zxo0myah/embedded/result/

 

 

post-179939-0-32087300-1425087831_thumb.jpg

Share this post


Link to post
Share on other sites

As Dsonesuk suggested above, it might not be advisable to use buttons and checkboxes. How do you submit the data to this program?

Share this post


Link to post
Share on other sites

The program uses a a webpage function to set items. For example in the picture above Pad2 in post #15 if you click one of the XXX.XXX it calls a function.

<div class="DISP2" id="COM1S" name="COM1S" onclick="CONVERT(this)">XXX.XXX</div>

Function

function CONVERT(event){                FREQ = parseFloat(document.getElementById("INPUT").value);		FREQ = FREQ.toFixed(2);		var n1 = FREQ.substr(0, FREQ.indexOf("."));		n1 = n1.substr(n1.length-2);		var n2 = FREQ.substr(FREQ.indexOf(".")+1,2);		var bcd = (parseInt(n1.charCodeAt(0) - 0x30 )<<12) + (parseInt(n1.charCodeAt(1) - 0x30 )<<8) + (parseInt(n2.charCodeAt(0) - 0x30 )<<4) + parseInt(n2.charCodeAt(1) - 0x30 );                document.getElementById("INPUT").value = "";		SETFREQ(event.id, bcd);}function SETFREQ(event, value){		$.ajaxSetup({ cache: false }); // nedeed for IE8        $.support.cors = true; // required if the script is local        $.ajaxSetup({ async: false });		var jqXHR = $.getJSON("http://" + location.hostname + "/set_event_value?name=" + event +  "&value=" + value, function(dane){});        $.ajaxSetup({ async: true });		}

 

 

Now with the Buttons i will need a talk back to change the state in the webpage if its changed in FSX, but that is something ill work on later.

 

I know i can change the state of the button with Jquery, but i was seeing if i could use Radio Buttons and Check Boxes.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...