Commit ca106abb authored by Thodoris Papadopoulos's avatar Thodoris Papadopoulos

radio button added to input example

parent ef60b522
#input-fields label {
font-weight: 700;
}
.checkbox-govgr, .radio-govgr {
opacity: 0;
position: absolute;
}
.checkbox-govgr, .checkbox-govgr-label, .radio-govgr, .radio-govgr-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-govgr-label, .radio-govgr-label {
position: relative;
}
.checkbox-govgr + .checkbox-govgr-label:before, .radio-govgr + .radio-govgr-label:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-govgr:checked + .checkbox-govgr-label:before {
background: rgb(0, 52, 117);
box-shadow: inset 0px 0px 0px 4px #fff;
}
.radio-govgr + .radio-govgr-label:before {
border-radius: 50%;
}
.radio-govgr:checked + .radio-govgr-label:before {
background: rgb(0, 52, 117);
box-shadow: inset 0px 0px 0px 4px #fff;
}
.checkbox-govgr:focus + .checkbox-govgr-label, .radio-govgr:focus + .radio-govgr-label {
outline: 1px solid #ddd; /* focus style */
}
label.radio-govgr-label > p {
font-weight: normal;
font-size:0.80rem;
}
\ No newline at end of file
......@@ -10,12 +10,14 @@
<!-- Custom GOV.GR theme - This already includes Bootstrap 4 -->
<link href="../../css/govgr_bootstrap.min.css" rel="stylesheet">
<link href="./input.css" rel="stylesheet">
</head>
<body class="h-100">
<main role="main" class="flex-shrink-0">
<div class="container">
<div class="">
<div class="pb-2">
<div id="input-fields" class="p-4">
......@@ -24,7 +26,7 @@
<label for="name" class="d-block">
Όνομα
</label>
<div class="bv-no-focus-ring">
<div>
<input id="name" type="text" placeholder="Συμπληρώστε το ονοματεπώνυμό σας" class="form-control is-valid" value="Θοδωρής Παπαδόπουλος"/>
<div class="valid-feedback"> Looks good! </div>
</div>
......@@ -34,10 +36,9 @@
<label for="email" class="d-block">
Email
</label>
<div class="bv-no-focus-ring">
<div>
<input id="email" type="text" placeholder="π.χ.: example@gov.gr" class="form-control is-invalid" />
<div class="invalid-feedback"> Παρακαλούμε συμπληρώστε το email σας. </div>
</div>
</div>
......@@ -45,25 +46,52 @@
<label for="comments" class="d-block form-label">
Σχόλια
</label>
<div class="bv-no-focus-ring">
<div>
<textarea id="comments" placeholder="Γράψτε εδώ..." rows="5" wrap="soft" class="form-control"></textarea>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
<div class="form-check pl-0">
<input class="form-check-input checkbox-govgr" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label checkbox-govgr-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
<div class="form-check pl-0">
<input class="form-check-input checkbox-govgr" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label checkbox-govgr-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
<div class="pl-0 py-4">
<fieldset class="form-group">
<div class="form-check pl-0">
<input class="form-check-input radio-govgr" id="input1" value="" type="radio" name="exampleRadiosWithDescription">
<label for="input1" class="form-check-label radio-govgr-label">
Υπηρεσίες για τον πολίτη
<p>Αν έχετε κάποια πρόταση που πιστεύετε πως μπορεί να κάνει καλύτερο το gov.gr, θέλουμε να την
ακούσουμε.</p>
</label>
</div>
<div class="form-check pl-0">
<input class="form-check-input radio-govgr" id="input2" value="" type="radio" name="exampleRadiosWithDescription">
<label for="input2" class="form-check-label radio-govgr-label">
Υπηρεσίες για επιχειρήσεις
<p>Αν έχετε κάποια πρόταση που πιστεύετε πως μπορεί να κάνει καλύτερο το gov.gr, θέλουμε να την
ακούσουμε.</p>
</label>
</div>
<div class="form-check pl-0">
<input class="form-check-input radio-govgr" id="input3" value="" type="radio" name="exampleRadiosWithDescription">
<label for="input3" class="form-check-label radio-govgr-label">
Υπηρεσίες για τρίτους
<p>Αν έχετε κάποια πρόταση που πιστεύετε πως μπορεί να κάνει καλύτερο το gov.gr, θέλουμε να την
ακούσουμε.</p>
</label>
</div>
</fieldset>
</div>
</form>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment