Post by greg56 on Jan 11, 2018 18:45:19 GMT -5
Using the code below, how do I extract the state of the checkboxes (checked or unchecked) to RunBasic?
Any help would be greatly appreciated.
html "<!DOCTYPE html >"
html "<html >"
html "<style>"
' The container
html ".container {"
html " display: block;"
html " position: relative;"
html " padding-left: 35px;"
html " margin-bottom: 12px;"
html " cursor: pointer;"
html " font-size: 22px;"
html " -webkit-user-select: none;"
html " -moz-user-select: none;"
html " -ms-user-select: none;"
html " user-select: none;"
html "}"
html ""
' Hide the browser's default checkbox
html ".container input {"
html " position: absolute;"
html " opacity: 0;"
html " cursor: pointer;"
html "}"
html ""
' Create a custom checkbox
html ".checkmark {"
html " position: absolute;"
html " top: 0;"
html " left: 0;"
html " height: 25px;"
html " width: 25px;"
html " background-color: #eee;"
html "}"
html ""
' On mouse-over, add a grey background color
html ".container:hover input ~ .checkmark {"
html " background-color: #ccc;"
html "}"
html ""
' When the checkbox is checked, add a blue background
html ".container input:checked ~ .checkmark {"
html " background-color: #2196F3;"
html "}"
html ""
' Create the checkmark/indicator (hidden when not checked)
html ".checkmark:after {"
html " content: '';"
html " position: absolute;"
html " display: none;"
html "}"
html ""
' Show the checkmark when checked
html ".container input:checked ~ .checkmark:after {"
html " display: block;"
html "}"
html ""
' Style the checkmark/indicator
html ".container .checkmark:after {"
html " left: 9px;"
html " top: 5px;"
html " width: 5px;"
html " height: 10px;"
html " border: solid white;"
html " border-width: 0 3px 3px 0;"
html " -webkit-transform: rotate(45deg);"
html " -ms-transform: rotate(45deg);"
html " transform: rotate(45deg);"
html "}"
html "</style>"
html "<body>"
html ""
html "<h1>Custom Checkboxes</h1>"
html "<label class='container'>One"
html " <input type='checkbox' checked='checked'>"
html " <span class='checkmark'></span>"
html "</label>"
html "<label class='container'>Two"
html " <input type='checkbox'>"
html " <span class='checkmark'></span>"
html "</label>"
html "<label class='container'>Three"
html " <input type='checkbox'>"
html " <span class='checkmark'></span>"
html "</label>"
html "<label class='container'>Four"
html " <input type='checkbox'>"
html " <span class='checkmark'></span>"
html "</label>"
html ""
html "</body>"
html "</html >"
wait
Any help would be greatly appreciated.
html "<!DOCTYPE html >"
html "<html >"
html "<style>"
' The container
html ".container {"
html " display: block;"
html " position: relative;"
html " padding-left: 35px;"
html " margin-bottom: 12px;"
html " cursor: pointer;"
html " font-size: 22px;"
html " -webkit-user-select: none;"
html " -moz-user-select: none;"
html " -ms-user-select: none;"
html " user-select: none;"
html "}"
html ""
' Hide the browser's default checkbox
html ".container input {"
html " position: absolute;"
html " opacity: 0;"
html " cursor: pointer;"
html "}"
html ""
' Create a custom checkbox
html ".checkmark {"
html " position: absolute;"
html " top: 0;"
html " left: 0;"
html " height: 25px;"
html " width: 25px;"
html " background-color: #eee;"
html "}"
html ""
' On mouse-over, add a grey background color
html ".container:hover input ~ .checkmark {"
html " background-color: #ccc;"
html "}"
html ""
' When the checkbox is checked, add a blue background
html ".container input:checked ~ .checkmark {"
html " background-color: #2196F3;"
html "}"
html ""
' Create the checkmark/indicator (hidden when not checked)
html ".checkmark:after {"
html " content: '';"
html " position: absolute;"
html " display: none;"
html "}"
html ""
' Show the checkmark when checked
html ".container input:checked ~ .checkmark:after {"
html " display: block;"
html "}"
html ""
' Style the checkmark/indicator
html ".container .checkmark:after {"
html " left: 9px;"
html " top: 5px;"
html " width: 5px;"
html " height: 10px;"
html " border: solid white;"
html " border-width: 0 3px 3px 0;"
html " -webkit-transform: rotate(45deg);"
html " -ms-transform: rotate(45deg);"
html " transform: rotate(45deg);"
html "}"
html "</style>"
html "<body>"
html ""
html "<h1>Custom Checkboxes</h1>"
html "<label class='container'>One"
html " <input type='checkbox' checked='checked'>"
html " <span class='checkmark'></span>"
html "</label>"
html "<label class='container'>Two"
html " <input type='checkbox'>"
html " <span class='checkmark'></span>"
html "</label>"
html "<label class='container'>Three"
html " <input type='checkbox'>"
html " <span class='checkmark'></span>"
html "</label>"
html "<label class='container'>Four"
html " <input type='checkbox'>"
html " <span class='checkmark'></span>"
html "</label>"
html ""
html "</body>"
html "</html >"
wait