logo
down
shadow

CSS How to align checkbox image


CSS How to align checkbox image

By : user2955947
Date : November 22 2020, 10:48 AM
wish of those help I trying to style my checkbox with custom image, but what I have tried so far is the tick image stick with the text, this doesn't look good, how to make the tick image and text align nicely ? , Note: From a usability point of view:
code :
background: url(urlPath) 10px center no-repeat
var PG = {
  divid: "",
  multiselection: "",
  optionitem: [],
  init: function(divid, multiselection, optionitem) {
    PG.divid = divid;
    PG.multiselect = multiselection;
    PG.optionitem = optionitem;

  },
  test: function() {
    for (var i = 0; PG.optionitem.length > i; i++) {
      alert(PG.optionitem[i].name);
    }
  },

  render_1: function() {
    $.each(array, function(i, obj) {

      var selection = "<input class='the_checkbox' type='checkbox' id=" + obj.value + " name=" + obj.name + " value=" + obj.value + ">" +
        "<label class='label' for=" + obj.value + ">" + obj.value + "</label>" +
        "<div class='pbar'><div class='pbarinner' style='width:75%;'></div></div>";

      $("#" + PG.divid).append(selection);
      if ($('input#' + obj.value).is(':checked')) {
        $('.pbar').css('display', 'block');
      }


    });



    $("#survey_title").append("What is your favorite fruit??");
    $("#choose").append("Please select 1 fruit only:");

    $('.the_checkbox').on('change', function(evt) {
      if ($(this).siblings(':checked').length >= PG.multiselect) {
        this.checked = false;
      }
    });



  },
  render_2: function() {
    $.each(w_array, function(i, obj) {
      var selection = "<input class='the_checkbox' type='checkbox' id=" + obj.value + " name=" + obj.name + " value=" + obj.value + ">" +
        "<label class='label' for=" + obj.value + ">" + obj.value + "</label>";


      $("#" + PG.divid).append(selection);

    });

    $("#survey_title").append("item??");
    $("#choose").append("Please select 3 item :");

    $('.the_checkbox').on('change', function(evt) {
      if ($(this).siblings(':checked').length >= PG.multiselect) {
        this.checked = false;
      }
    });



  },
  save: function() {}
}


var array = [];
array[0] = {
  "name": "fruit",
  "value": "mango"
};
array[1] = {
  "name": "fruit",
  "value": "apple"
};
array[2] = {
  "name": "fruit",
  "value": "orange"
};
array[3] = {
  "name": "fruit",
  "value": "banana"
};


var w_array = [];
w_array[0] = {
  "name": "com",
  "value": "RAM"
};
w_array[1] = {
  "name": "com",
  "value": "DISK"
};
w_array[2] = {
  "name": "com",
  "value": "BOOK"
};
w_array[3] = {
  "name": "com",
  "value": "PEN"
};


PG.init("popupfoot", "1", array);
PG.render_1();
/*PG.init("survey_question", "3", w_array);
PG.render_2();*/
.label {
  margin: 5px;
  color: #ccc;
  font-size: 12px;
  cursor: pointer;
}
.label:hover {
  color: #444;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox] + .label {
  padding: 5px;
}
input[type=checkbox]:checked + .label {
  color: #444;
  position: relative;
  margin: 2px;
  background: url(http://icons.iconarchive.com/icons/custom-icon-design/mini/16/Accept-icon.png) 10px center no-repeat;
  background-color: #ccc;
  padding-left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="popupfoot">
  <p id="survey_title"></p>
  <h5 id="choose"></h5>

  <div id="survey_question"></div>
</div>


Share : facebook icon twitter icon
Right-Align and Vertical Align label with checkbox/radio button CSS

Right-Align and Vertical Align label with checkbox/radio button CSS


By : Hilary Law
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further I'm very close and have this working in Safari, Firefox and IE8, however IE7 the labels and radio buttons do not align vertically. , This could be what you needed:
code :
label, input {vertical-align: baseline;}
Bootstrap 2 columns vertical align + 1 image align left + 1 image align right

Bootstrap 2 columns vertical align + 1 image align left + 1 image align right


By : bizzl
Date : March 29 2020, 07:55 AM
seems to work fine It's because you didn't float left or right the good element.
Here is the working code with better class ( pull-right and pull-left )
code :
 <div class="container" >
        <div class="col-md-6">
            <div style="display:table; height:100px;" class="pull-left">
                <div style="display:table-cell; vertical-align:middle; ">
                    <div> 
                        <img src="http://tarheelreader.org/theme/images/reviewed.png" /> 
                    </div>
                </div>
            </div>              
        </div>
        <div class="col-md-6">
            <div style="display:table; height:100px;" class="pull-right">
                <div style="display:table-cell; vertical-align:middle;">
                    <div>
                        <img src="http://tarheelreader.org/theme/images/reviewed.png" /> 
                    </div>
                </div>
            </div>              
        </div>
    </div>
How to pad a span's bottom text to align with a checkbox image?

How to pad a span's bottom text to align with a checkbox image?


By : Jack Jen
Date : March 29 2020, 07:55 AM
it helps some times I'm trying a pretty trivial design but still can't find a solution. , Just use vertical-align: middle. Hope it helps.
code :
.chkchk {
  display: none;
}

.chkchk+label {
  background-image: url(http://i.imgur.com/RnoKxPS.png);
  height: 22px;
  width: 35px;
  display: inline-block;
  padding: 0 0 0 0px;
  cursor: pointer;
  vertical-align: middle
}

.chkboxText {
  padding-bottom: 10px;
  display: inline-block;
}
<input class="chkchk" type="checkbox" name="thing" value="valuable" id="thing" />
<label for="thing"></label>
<span class="chkboxText">dasdasdas</span>
How do you horizontal align image and text inside a checkbox element?

How do you horizontal align image and text inside a checkbox element?


By : user3198593
Date : March 29 2020, 07:55 AM
help you fix your problem I left out some HTML attributes that doesn't really make it easy to understand what is happening in this demo-code. I also needed to make a new container around your text elements.
Hopefully this demo gives you a headstart to figure out how you want to build it.
code :
.hidden {
  display: none;
}

.registerCheckbox {
    padding: 10px;
    display: block;
    position: relative;
    margin: 10px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    border-width: 1px;
    border-color: #ddd;
    border: 1px solid rgb(212, 212, 212);
    box-shadow: 7px 7px 2px -3px rgb(212, 212, 212);
    border-radius: 25px;
    transition: 0.2s;
  }
  
  /* Flexbox solution */
  .flex.registerCheckbox  {
    display: flex;
  }
    
  .flex.registerCheckbox .text-container {
    display: flex;
    flex-direction: column;
    padding: 0 10px 10px;
  }
  
  .registerCheckbox::before {
    background-color: white;
    color: white;
    content: " ";
    display: block;
    border-radius: 50%;
    border: 1px solid grey;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    transition-duration: 0.4s;
    transform: scale(0);
  }

  .registerCheckbox img {
    height: 100px;
    width: 100px;
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
  }

  input:checked + .registerCheckbox {
    border-radius: 25px;
    border: 5px solid #5BDEBE;
    transition: 0.2s;
  }

  input:checked + .registerCheckbox::before {
    content: "";
    border-color: #ddd;
    border: 1px solid grey;

  }
<input type="checkbox" id="google-1" class="hidden" />
 <label for="google-1" class="flex registerCheckbox">
 <img alt="Google ads" src="https://placehold.it/400x400" />
  <div class="text-container">
    <strong>Test</strong>
    <span>This doesn't work.</span>
  </div>
 </label>
 
 <input type="checkbox" id="google-2" class="hidden" />
 <label for="google-2" class="flex registerCheckbox">
 <img alt="Google ads" src="https://placehold.it/400x400" />
  <div class="text-container">
    <strong>Test</strong>
    <span>This doesn't work.</span>
  </div>
 </label>
Inno Setup - How to re-align the checkbox in the wpFinished page with image customized by ISSI script?

Inno Setup - How to re-align the checkbox in the wpFinished page with image customized by ISSI script?


By : miss_vee
Date : March 29 2020, 07:55 AM
will help you The ISSI does not handle a RunList (list of checkboxes on "finish" page) at all.
I cannot test it, but this should do:
Related Posts Related Posts :
  • CSS Media Queries not kicking in when there supposed to
  • Video JS - poster image cover/contain
  • center the div absolute using css but i cannot figure out why its not moving to centre
  • simple css code, i dont understand
  • Autoformatting LESS code with vim
  • Can we use different CSS language/pre processors for different components in a Angular Project
  • combined multiple classes into one css rule
  • Detect mobile device browsers, not only screen width
  • CSS folded corners of div with shadow
  • bootstrap 3: why do my <div>s stack from 992 px width onwards when using "col-sm-6"
  • IE7, IE8 support for css3 media query
  • Gradient ends are blurry when using pixel measurements
  • display bootstrap popovers outside divs with overflow:hidden
  • How to make a non responsive site by using Bootstrap?
  • Selecting an element that doesn't have a child with a certain class
  • Embedded Twitter Widget Height issue
  • Twitter Bootstrap - How to get buttons to be block level only on extra small and small devices
  • How can I add a vertical scrollbar to my div automatically?
  • Trouble changing the link font color using typography.js in gatsby
  • Nesting up scss with main.scss and subcomponent scss files
  • Why does my FontSquirrel font not work?
  • Div positioning (overlays when not wanted)
  • Align button vertically in alert field
  • CSS: display: flex and text ellipsis on the same element
  • Fixed position buttons appearing in incorrect area depending on browser
  • CSS-menu issue in angular project
  • Responsive Website - general enquiries
  • Webkit Scrollbar Buttons only showing horizontal
  • explicitly set a field's width in css to "no-auto"
  • Jekyll accessing page variables from CSS
  • Why did my #wrapDesktopNavBar disappear on desktop view?
  • CSS Menu Multiple Hover Colo(u)rs
  • Line-height works differently on Mac and Windows
  • Resizing an image at will with CSS?
  • CSS Naming Best Practice in MVC Layouts
  • FireFox & Chrome CSS Differs
  • Gradient Border Causing the Border to Disappear
  • How to hide column label on google chart
  • How to change H3 color in bootstrap using CSS file
  • css3 jagged edge on left isntead of right
  • display text in a horizontal line , using ng-repeat and bootstrap
  • Css right top corner
  • Bootstrap keep button other border gradient when removing border-left
  • Getting divs in the right postion
  • Rails 4: Sass raises SyntaxError when precompiling assets on server but not on development computer
  • Boostrap css file overrode my css file
  • Why are placeholder selectors inside @keyframes valid .scss?
  • Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container?
  • CSS Not Selector: Select All Except Inside of Element
  • CSS Intellisense for files not in solution
  • Overlapping Anchor Tags When Hovering Over One
  • Any way to keep Susy from changing font-size automatically?
  • In Chrome’s user agent stylesheet, why use "-webkit-margin-before" et al instead of just "margin-top"
  • Responsive slanted border
  • SCSS variables - same name, different value in different media breakpoints
  • How to create overlay over div without defining it in HTML
  • Using negative values fails the execution in SASS
  • up/down arrow key issue with typeahead control (angular bootstrap UI)
  • increase size of search terms in a magento site by applying css class-name
  • Inline elements not collapsing whitespace before the end of the tag, in modern browsers?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org