Linuchs: wie kann ich optisch eine checkbox verstecken? (oder code auf radiobuttons anpassen)

Beitrag lesen

Hallo AnLu,

dein Ansatz ist gar nicht so dumm und ich möchte ihn aufgreifen.

Du kannst die zu tippende Zahl in eine Box (z.B. Tabellenzelle) schreiben und die Checkbox halbtransparent drüberlegen. Dann wird die Checkbox selbst geklickt und muss nicht umständlich versteckt und vergewaltigt werden:

<style>
  td {
    text-align: center;
    position: relative;
    font-weight: bold;
    border: 1px solid #ccf;
  }
  td input[type=checkbox] {
    transform: scale(4);
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: .8;
</style>

<script>
function check ( obj ) {
  // die Zahl ist obj.value
}
</script>

<table>
  <tr>
    <td>48<input type=checkbox name=box onclick="check(this)" value="48"></td>
    <td>49<input type=checkbox name=box onclick="check(this)" value="49"></td>
  </tr>
</table>

Bei mir im Firefox sieht es so verwaschen aus. Vielleicht gibt es einen Tipp, wie man das aufhübschen könnte.

Eigentlich wollte ich den checkboxen left:0; top:0; geben, aber dann wandern sie nach links oben aus der Box. Vermutlich werden sie erst positioniert und dann vergrößert. Die Vergrößerung im CSS zuerst anzugeben, hilft nicht.

Linuchs