How to do a border onclick?

HTML & CSS
1

Hello & Thanks :
In my code below , how can I set up css etc. to do a border onclick .
I want to then open up a message-window for user .
THanks for your help !

<!DOCTYPE html>
<html>
<head>
<style>
p.borderShowTop
{
  background-color: yellow;
  padding: 20px;
  display: none;
}
p.borderShowRight
{
  background-color: yellow;
  padding: 20px;
  display: none;
}
div {
   border-style: solid;
   border-color: green red blue pink;
   border-width: 12px 12px 1px 2px;
}
div:hover + p.borderShowTop{
  display: block;
}
</style>
</head>
<body>
<br><br>
<div contenteditable="true">Hover over me! Contenteditable.</div>
<p class="borderShowTop">I will show on hover</p>

</body>
</html>
2

Hi there vmars316,

here is a basic border only clickable example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

div {
    position: relative;
    display: inline-block;
 }

div a {
    display: block;
    width: 6.25em;
    height: 3.875em;
    border: 0.5em solid #000;
 }

div  span {
    position: absolute;
    width: 5.25em;
    height: 2.875em;
    padding: 0.5em;
    top: 0.5em;
    left: 0.5em;
    background-color: #fff;
    text-align: center;
 }
</style>

</head>
<body> 

 <div>
  <a href="https://www.coothead.co.uk/the-pale-blue-dot">link</a>
  <span>the border is clickable</span>
 </div>

</body>
</html>

coothead

3

2019-08-05T06:00:00Z
Thanks: Yes I see that a link is clickable .
But how would I do it if , say , I want to change the border width with a border click .
Or Open up a msgBox window with Buttons .
See code below:
Its the setting up of a Css clickable border
That I want to do .

<!DOCTYPE html>
<html>
<title>file:///C:/javascript/otherObj/jsMsgBoxPlus.html</title>
<body>
<p>Click Button to open a msgBox</p>
<button onclick="myFunction()">msgBox</button>
<script>
var myWindowHtml = '<p>Yes , No , Continue , Cancel ?</p><p><button id="yesBtn">Yes</button><button id="noBtn">No</button><button id="continueBtn">Continue</button><button id="cancelBtn">Cancel</button></p>';
var myWindow;
var btn1 = "yesBtn";  var btn2 = "noBtn"; var btn3 = "continueBtn";  var btn4 = "cancelBtn"; 
function myFunction() {
    myWindow = window.open("", "MsgWindow", "width=400,height=100");
    myWindow.document.write(myWindowHtml);
    myWindow.document.getElementById(btn1).addEventListener("click", function(){yesClick();});
    myWindow.document.getElementById(btn2).addEventListener("click", function(){noClick();});
    myWindow.document.getElementById(btn3).addEventListener("click", function(){continueClick();});
    myWindow.document.getElementById(btn4).addEventListener("click", function(){cancelClick();});
}
function yesClick(){
    alert("you Clicked Yes !\n Bye...");
    myWindow.close();
	}
function noClick(){
    alert("you Clicked no !\n Bye...");
    myWindow.close();
	}
function continueClick(){
    alert("you Clicked continue !\n Bye...");
    myWindow.close();
	}
function cancelClick(){
    alert("you Clicked cancel !\n Bye...");
    myWindow.close();
	}
</script>
</body>
</html>

Thanks

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.