Jump to content

Radio Button with CSS


DoyleChris98

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
Link to comment
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.

Link to comment
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.

Link to comment
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>
Link to comment
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

Link to comment
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.

Link to comment
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

Link to comment
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
Link to comment
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?

Link to comment
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

Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...