stackoom
  简体   繁体   中英

Styling a select box

 原文  2015-11-16 13:53:38  4   1    javascript/ html/ css/ jquery-mobile/ hybrid-mobile-app

Question

I am having difficulty styling the select box at the top of my page to look like the collapsible DIVs below.. I will only need to do this cosmetic change when my API returns 2 objects (When there are 2 options for the select box). I also don't want to use a plugin which lets you give the button a onClick function to mimic the dropdown selection if I can - would require lots of redevelopment etc..

I am wanting to style it as suck when there are 2 options:

white plus sign added to the left of the select box

Here is some code I use to Style the buttons: 

var innerdiv = $('<div class="acc_list" data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="b" ></div>');

This adds the collapsible feature to the DIV.

I have tried adding to the DIV which I have the select box inside of but it seems to add it the bottom right. 

 <div id="selectBoxContainer" data-role="fieldcontain">
              <select id="selectbox" class="combobox" name="selectbox" onchange="PolicyChange('selectbox')"></select>
          </div>

I run a check to see if the data contains two objects and if so: 

  if (parseInt(policies.length) > 1)
{
    select.removeClass('combobox');
    changeBox.addClass('ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus ui-btn-b');
}

Below is my CSS page: 

    /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
    -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
    -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color: #E4E4E4;
    background-image: linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image: -webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image: -ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #A7A7A7), color-stop(0.51, #E4E4E4) );
    background-attachment: fixed;
    height: 100%;
    margin: 0px;
    padding: 0px;
    width: 100%;
    background: transparent !important;
    /* 170px x 200px */
    background-repeat: no-repeat;
    font-size: 15px;
    background-position: center top;
    background-size: 100% !important;
}

/* Portrait layout (default) */
.app {
    position: absolute; /* position in the center of the screen */
    height: 50px; /* text area height */
    width: 225px; /* text area width */
    text-align: center;
    padding: 180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */
    margin: -115px 0px 0px -112px; /* offset vertical: half of image height and text area height */
    /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position: left center;
        padding: 75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */
        margin: -90px 0px 0px -198px; /* offset vertical: half of image height */
        /* offset horizontal: half of image width and text area width */
    }
}

h1 {
}

.event {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #FFFFFF;
    font-size: 12px;
    margin: 0px 30px;
    padding: 2px 0px;
}

    .event.listening {
        background-color: #333333;
        display: block;
    }

    .event.received {
        background-color: #4B946A;
        display: none;
    }

@keyframes fade {
    from {
        opacity: 1.0;
    }

    50% {
        opacity: 0.4;
    }

    to {
        opacity: 1.0;
    }
}

@-webkit-keyframes fade {
    from {
        opacity: 1.0;
    }

    50% {
        opacity: 0.4;
    }

    to {
        opacity: 1.0;
    }
}

.centerize {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.img_grey {
    display: block;
    -webkit-filter: grayscale(100%);
}

.blink {
    animation: fade 3000ms infinite;
    -webkit-animation: fade 3000ms infinite;
}

.ui-btn.ui-input-btn, .ui-link.ui-btn {
    display: inline-block;
    vertical-align: bottom;
}

.ui-block-a, .ui-block-b, .ui-block-c {
    text-align: center !important;
}

.ui-content {
}

div[data-role="footer"] {
}

    div[data-role="footer"] .nav-glyphish-example .ui-btn .ui-btn-inner {
        padding-top: 40px !important;
    }

    div[data-role="footer"] .nav-glyphish-example .ui-btn .ui-icon:after {
        width: 30px !important;
        height: 30px !important;
        margin-left: 15px !important;
        box-shadow: none !important;
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -webkit-border-radius: 0 !important;
        border-radius: 0 !important;
    }


#home.ui-btn-icon-top:after {
    background-position: 10% 10%;
    background-size: 100% 100% !important;
    background-image: url('../img/home-white.png') !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

#call.ui-btn-icon-top:after {
    background-position: 10% 10%;
    background-size: 100% 100% !important;
    background-image: url('../img/contact-white.png') !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

#settings.ui-btn-icon-top:after {
    background-position: 10% 10%;
    background-size: 100% 100% !important;
    background-image: url('../img/settings-white.png') !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

#panic.ui-btn-icon-top:after {
    background-position: 10% 10%;
    background-size: 100% 100% !important;
    margin-top: 5px;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

#panicafr.ui-btn-icon-top:after {
    background-position: 10% 10%;
    background-size: 100% 100% !important;
    margin-top: 5px;
    background-image: url('../img/panicafr.png') !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

a#panic.panicAfr:after {
    background-position: 10% 10%;
    background-size: 100% 100% !important;
    margin-top: 5px;
    background-image: url('../img/panicafr.png') !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

a#panic.panicEng:after {
    background-position: 10% 10%;
    background-size: 100% 100% !important;
    margin-top: 5px;
    background-image: url('../img/panic.png') !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

a#panic.panicAfrSkip:after {
    background-position: 10% 10%;
    background-size: 100% 100% !important;
    margin-top: 5px;
    background-image: url('../img/panicgreyafr.png') !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

a#panic.panicEngSkip:after {
    background-position: 10% 10%;
    background-size: 100% 100% !important;
    margin-top: 5px;
    background-image: url('../img/panicgrey.png') !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

.ui-grid-b > .ui-block-a p, .ui-grid-b > .ui-block-b p, .ui-grid-b > .ui-block-c p {
    margin: 5px 0 20px 0;
}

.backbutton {
    background-image: url(../img/back.png);
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 25px !important;
    background-size: auto 100%;
    color: #0096ff !important;
    background-color: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    width: 0.6em;
    height: 0.6em;
    padding-top: 0.2em;
}

.loginbutton {
    background-image: url(../img/login-skip.png);
    background-repeat: no-repeat;
    background-position: right;
    padding-left: 25px !important;
    background-size: auto 100%;
    color: #0096ff !important;
    background-color: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    width: 10px;
    height: 10px;
    padding-top: 5px;
}

.logo {
    text-align: center;
}

li {
    padding-left: 2px;
}

.acc_list a:after {
    border-radius: 4em !important;
    width: 2.5em !important;
    height: 2.5em !important;
    left: 0.15em;
    top: 1em;
}


div#backHeader * {
    vertical-align: middle;
    line-height: 1.5em;
}

.lbl-no-float {
    float: initial !important;
}

div.loadingModal * {
}

div.loadingModal img {
    margin-top: 2em;
}

.infoimg {
    width: 1em;
    height: 1em;
}

div.loadingModal p:after {
    content: '...';
}

div.loadingModal p {
    padding-left: 0.5em;
}

#img_login_skip {
    position: absolute;
    right: 0;
    padding-right: 0.2em;
    top: -0.35em;
}

div.ui-block-b.userInfo label {
    display: block;
    width: 100%;
    text-align: left;
}

fieldset { 
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px;
}

hr { width:100%; height:1px; background: #fff }

a.ui-collapsible-heading-toggle.ui-btn.ui-icon-plus.ui-btn-icon-left.ui-btn-b,
a.ui-collapsible-heading-toggle.ui-btn.ui-btn-icon-left.ui-btn-b.ui-icon-minus {
    background-image: none !important;
    background-color: rgb(237, 237, 237) !important;
}

.profileimagesection {
    margin: 0 auto;
    overflow: hidden;    
    margin-bottom: 1em;
}

.pressedIconsContainerInactive{
    opacity: 1.0 !important;
    -moz-opacity: 1.0 !important;
    -webkit-opacity: 1.0 !important;
    filter: alpha(opacity=100) !important; /*IE compatibility for Windows Phones (possihttp://localhost:59778/IntegriSure/css/index.cssbly needed)*/
}

.pressedIconsContainerActive{
    opacity: 0.7 !important;
    -moz-opacity: 0.7 !important;
    -webkit-opacity: 0.7 !important;
    filter: alpha(opacity=70); /*IE compatibility for Windows Phones (possibly needed)*/
}


/*.userProfilePic{
    background-size:cover;
    width: 40vw; /*use CSS3 viewports to keep  size on Tablets*/
/*    height: 25vh; /*use CSS3 viewports to keep size on Tablets*/
/*    border: 1px solid #eee;
    border-radius: 5px;
}*/

.inactiveLink {
   pointer-events: none;
   cursor: default;
}

.ui-icon-loading {
    background: url('../img/loading-spin.svg') !important;
    background-size: contain !important;
}

.ui-loader-default {
    opacity: 1.0 !important;
}

.ui-btn-inline {
    margin-right: 0 !important;
}

#claimstracking .ui-field-contain label:last-child{
    width:auto;
}

.ui-listview a {
    display: block;
    /* max-width: 80%; */
    word-wrap: break-word;
    white-space: normal;
    text-decoration: none;
}

#pressdetails #pressData * {
    font-size:  12pt !important;
}

.toolbarinitial {
    position: initial;
}

input.red{
background-color: #FF0000;
border-color: #F04040;
}

input.green{
background-color: #00FF00;
border-color: #8DFF1C;
}

After trying the below response - I get the white plus but its to the bottom left - cannot seem to get it inline with the text.. Hard to see in the image but the cross is there but not inline:

Top of the cross on the bottom left of the text

Any more suggestions?

1 answers

solution1
 0  2015-11-16 14:44:02

The jQM select widget has properties for putting the icon on the left and for choosing what icon to display ( data-iconpos="left" data-icon="plus" ): 

<div id="selectBoxContainer" data-role="fieldcontain">
      <select id="selectbox" class="combobox" name="selectbox" data-iconpos="left" data-icon="plus" >
          <option val="1">Option 1</option>
          <option val="2">Option 2</option>
      </select>          
</div>

Then if you want to hid the gray disk behind the icon so just the white plus shows, use this CSS: 

#selectBoxContainer .ui-select .ui-btn-icon-left::after {
    background-color: transparent !important;
}

DEMO

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Select box styling issue bootstrap select box styling conflict Styling a select box with a size attribute? Re-apply jQuery select box styling when new select box is added to page confirm box styling Styling box with button click styling the input box autocomplete Styling select element (jQuery) <Select> Placeholder styling Styling Select elements
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM