如何将我的样式选择菜单设置为Chrome中父容器的100％宽度？

时间：2017-09-07 21:10:01

标签： jquery html css css3 width

我正在创建一个带有文本框和样式选择菜单的表单（本质上是一个包含其他DIV的DIV）。我希望两个项目的宽度相同，最好不是固定的像素宽度，而是100％的可用空间。我有

  <div class="field">
    <label for="user_notification_price">Label</label> <span class="required">*</span> <br>
    <input size="30" type="text" name="user_notification[price]" id="user_notification_price" />
  </div>

  <div class="field">
    <label for="user_notification_buy">Condition</label> <span class="required">*</span> <br>
    <select name="user_notification[buy]" id="user_notification_buy"><option value="">Select Notification Time</option>
<option value="false">Above</option>
<option value="true">Below</option></select> 
    <p class='error'></p>
  </div>

其中我为文本框指定了100％的宽度...... 

input[type=text] {
  margin-bottom: 20px;
  margin-top: 10px;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
  box-sizing: border-box;
  width: 100%;
  /*  added property  */
}

然后“100％”表示样式化DIV菜单的宽度（通过jQuery完成）。这在Firefox上很有用 - https://jsfiddle.net/yj3cdvfy/3/，但在Chrome中看起来并不那么一致。

请注意，样式化选择菜单的文本是换行，文本框超出了父容器的边界。我认为Chrome应该是最好的浏览器！无论如何，我需要做什么才能像在Firefox中一样在Chrome中运行？

5 个答案:

答案 0 :(得分：0)

尝试删除margin: 4% 15%;样式中的行form（第40行） 如果要填充，请将padding: 4% 15%;添加到#userNotificationForm的样式中。

enter image description here

答案 1 :(得分：0)

试试这个：

 #userNotificationForm{
    width: 50%; //change this to the width you want for the form
 }

#user_notification_price{
    width: 100%;
 }

#user_notification_buy{
   width: 100%;
}

希望这对你有所帮助。

答案 2 :(得分：0)

您可以在css中使用选择选择器。

input[type=text],
select {
  margin-bottom: 20px;
  margin-top: 10px;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
  box-sizing: border-box;
  width: 100%;
  /*  added property  */
}

答案 3 :(得分：0)

form {
  margin: 4% 15%;
  font-family: Manuelle;
  font-size: 14px;
  width:70%;
}


input[type=text] {
  margin-bottom: 20px;
  margin-top: 10px;
  width:100%;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
  box-sizing: border-box;
  /*  added property  */
}

使用width:70%添加form tag，width:100%添加input[type=text]。

答案 4 :(得分：0)

首先，当容器的margin取决于时，百分比中设置width em>关于内容（这是这里的情况）。使用像素可能是个更好的主意。

记住容器上的margin百分比是根据width计算的：

  

保证金的大小，以百分比表示，相对于   包含块的宽度。 （MDN）

<强>为什么吗

在<{1}}容器中以百分比给出margin时，Chrome看起来有问题，而firefox没有此类问题。

可能的解决方案

请参阅下面的演示，其中inline-block替换为margin: 4% 15%：

margin: 20px
$(function() {

  $('select').each(function() {
    styleSelectMenu($(this));
  });

});

// This method applies the styles to our select menu
function styleSelectMenu(selectMenu) {
  var $this = $(selectMenu),
    numberOfOptions = $(selectMenu).children('option').length;

  /*** NEW - start ***/
  var $paddingCalculator = $('<div />', {
    'class': "select-styled test"
  }).css({
    width: 0,
    visibility: "hidden"
  }).appendTo("body");
  $this.addClass('select-hidden');
  var paddingWidth = $paddingCalculator.outerWidth() + 10;
  $paddingCalculator.remove();

  var selectWidth = "100%"; // $this.outerWidth() + paddingWidth;
  var clickHandled = false;

  if (!$this.parent().hasClass('select')) {
    var $wrapper = $("<div />", {
      'class': "select",
      'tabIndex': '1'
    }).css({
      width: selectWidth
    }).focus(function() {
      $(this).find('.select-styled').click();
    }).blur(function() {
      clickHandled = false;
      $(this).find(".select-options li").removeClass("selected");
      $(this).find('.select-styled').removeClass('active').next('ul.select-options').hide();
    });
    $this.wrap($wrapper);
  } // if

  /*** NEW - end ***/

  if (!$this.next().hasClass('select-styled')) {
    $this.after('<div class="select-styled"></div>');
  } // if

  var $styledSelect = $this.next('div.select-styled');
  $styledSelect.text($this.children('option').eq(0).text());

  if ($styledSelect.parent().find('ul').length > 0) {
    $styledSelect.parent().find('ul').remove();
  } // if
  var $list = $('<ul />', {
    'class': 'select-options'
  }).insertAfter($styledSelect);

  for (var i = 0; i < numberOfOptions; i++) {
    $('<li />', {
      text: $this.children('option').eq(i).text(),
      rel: $this.children('option').eq(i).val()
    }).appendTo($list);
  }

  var $listItems = $list.children('li');

  // This is the event when someone opens the list
  $styledSelect.unbind('click')
  $styledSelect.click(function(e) {
    //if(clickHandled) {  
    //    clickHandled = false; 
    //} else {
    clickHandled = true;
    e.stopPropagation();
    $('div.select-styled.active').each(function() {
      $(this).removeClass('active').next('ul.select-options').hide();
    });
    $(this).toggleClass('active').next('ul.select-options').toggle();
    var selectedIndex = $(this).parent().find('select option:selected').index();
    selectedElement = $(this).parent().find(".select-options li")[selectedIndex];
    $(selectedElement).addClass("selected");
    selectedElement.scrollIntoView(false);
    //}	// if 
  });

  // This is the event when someone actually selects something from the list
  $listItems.unbind('click.selectStyledItem')
  $listItems.bind('click.selectStyledItem', function(event) {
    clickListItem(event, $styledSelect, $this, $(this), $list);
  });

  /* $(document).click(function(event) {
      $styledSelect.removeClass('active');
      $list.hide();
  }); */

  var selectedIndex = $this[0].selectedIndex;
  if (selectedIndex > 0) {
    var name = $this.attr("name")
    var selectedText = $("select[name='" + name + "'] option:selected").text();
    selectItemFromStyledList($styledSelect, $this, selectedText, $list);
  } // if

  var parent = $this.parent()
  $(parent).bind('keydown', function(event) {
    var currentElement = $(this).find(".select-options li.selected");
    if (currentElement.length == 0) {
      currentElement = $(this).find(".select-options li")[0];
      $(currentElement).addClass("selected");
      return;
    } // if
    var nextElement;
    switch (event.keyCode) {
      // case up
      case 38:
        nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) - 1) % $(this).find(".select-options li").length];
        break;
        // case down 
      case 40:
        nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) + 1) % $(this).find(".select-options li").length];
        break;
        // case <ENTER>
      case 13:
        var currentElement = $(this).find(".select-options li.selected");
        $(currentElement).click();
        break;
        // case escape 
      case 27:
        $(this).blur();
    }
    $(this).find(".select-options li").removeClass("selected");
    if (nextElement) {
      $(nextElement).addClass("selected");
      nextElement.scrollIntoView(false);
    }
  });

  var keyUps = "",
    timeOut, $selectOptions = $('.select-options');
  $(parent).bind('keyup', function(event) {
    if (!$selectOptions.prev().hasClass('active')) {
      return false;
    }
    if (event.keyCode) {
      keyUps += event.key;
      retrieveFromOptions($selectOptions, keyUps);
    }
    clearTimeout(timeOut);
    timeOut = setTimeout(function() {
      keyUps = "";
    }, 250);
    //var currentElement = $(this).find(".select-options li.selected");
    //var val = String.fromCharCode(event.keyCode);
    //retrieveFromOptions($(this).find('ul'),val); 
  });

  $listItems.hover(
    function(e) {
      $(this).addClass("selected");
    },
    function(e) {
      $(this).closest(".select-options").find("li.selected").removeClass("selected");
    }
  );

}

// This is the method that will select an item from the styled list
function selectItemFromStyledList(styledSelect, selectMenu, selectedText, listToHide) {
  $(styledSelect).text(selectedText).removeClass('active');
  //var selectedVal = $(selectMenu).attr('rel'); 
  //$(selectMenu).val(selectedVal);

  $(listToHide).hide();
  // Select option in the underlying list so that the form gets submitted
  // with the right values
  $(selectMenu).find("option[selected='selected']").removeAttr("selected");
  $(selectMenu).find('option').filter(function() {
    return $(this).html() == selectedText;
  }).prop('selected', true)
  // Trigger an on change event 
  $(selectMenu).trigger("change");
} // selectItemFromStyledList

// Called when someone clicks an item from the styled list
// The event data should contain the following parameters:
//      styledSelect - the <div> element that contains the styled menu
//      selectMenu - the actual form element that contains the items
//      listItemClicked - the item that was clicked.
//      list - THe <UL> element containig the <li> options
function clickListItem(event, styledSelect, selectMenu, listItemClicked, list) {
  var $styledSelect = $(styledSelect);
  var $selectMenu = $(selectMenu);
  var $listItem = $(listItemClicked);
  var $list = $(list);

  event.stopPropagation();
  var selectedText = $listItem.text();
  selectItemFromStyledList($styledSelect, $selectMenu, selectedText, $list)
} // clickListItem  

// Given a keystroke (val), this selects an option 
function retrieveFromOptions($options, val) {
  $options.find('li').each(function(index) {
    if (this.textContent.substring(0, val.length).toLowerCase() === val.toLowerCase()) {
      $(this).parent().find(".select-options li").removeClass("selected");
      $(this).addClass("selected");
      this.scrollIntoView(false);
      //$options.scrollTop($(this).height()*index);
      return false;
    }
  });
}
body {
  background-color: #e0e0e0;
}

form {
  /*margin: 4% 15%;*/
  margin: 20px;
  font-family: Manuelle;
  font-size: 14px;
}


/* line 20, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */

header {
  background-color: #4180C5;
  text-align: center;
  padding-top: 12px;
  padding-bottom: 8px;
  margin-top: -11px;
  margin-bottom: -8px;
  border-radius: 10px 10px 0 0;
  color: aliceblue;
}


/* line 31, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */

.field {
  padding-top: 10px;
}


/* Makes responsive fields.Sets size and field alignment.*/


/* line 36, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */

input[type=text] {
  margin-bottom: 20px;
  margin-top: 10px;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
  box-sizing: border-box;
  /*  added property  */
}


/* line 45, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */

.buttonContainer {
  text-align: center;
}


/* line 49, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */

input[type=submit] {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
  background-color: #4180C5;
  color: aliceblue;
  font-size: 15px;
  cursor: pointer;
}


/* line 60, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */

#submit:hover {
  background-color: black;
}


/* line 64, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */

textarea {
  width: 100%;
  padding: 15px;
  margin-top: 10px;
  border: 1px solid #7ac9b7;
  border-radius: 5px;
  margin-bottom: 20px;
  resize: none;
}


/* line 73, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */

input[type=text]:focus,
textarea:focus {
  border-color: #4697e4;
}

#userNotificationsWrapper {
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid #C7CDD1;
  font-family: Acme;
  font-size: 18px;
  padding-left: 10px;
}


/* line 16, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

h2 {
  font-size: 18px;
  font-family: Manuelle;
  text-align: center;
}

@media (max-width: 1200px) {
  /* line 23, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
  #userNotificationsTableWrapper {
    width: 100%;
  }
}


/* line 28, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

#userNotificationsTable {
  width: 100%;
}


/* line 32, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

#userNotificationsTable tr {
  text-align: left;
  min-height: 30px;
}


/* line 37, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

#userNotificationsTable thead {
  background-color: grey;
  color: #fff;
}


/* line 42, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

#userNotificationsTable tr th {
  font-weight: bold;
}


/* line 46, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

.currency-row img,
.currency-row .name {
  vertical-align: middle;
}


/* line 50, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

.currency-row {
  border-bottom: 1px solid #C7CDD1;
}


/* line 54, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

.currency-row img,
.currency-row .name {
  vertical-align: middle;
}


/* line 58, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

.currency-row td {
  padding: 12px 0 12px 0;
}


/* line 62, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

#userNotificationsTable th {
  padding: 12px 0 12px 0;
}


/* line 66, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

#userNotificationsTable th:first-child {
  padding-left: 10px;
}


/* line 70, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

.currency-row td:first-child {
  padding-left: 10px;
}


/*
.currency-row td:last-child {
    padding-right:5px;
}
*/


/* line 79, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

.currency-title {
  white-space: nowrap;
}


/* line 84, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

.arrow-up {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid black;
  vertical-align: middle;
  display: inline-block;
}


/* line 94, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

.arrow-down {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #f00;
  vertical-align: middle;
  display: inline-block;
}


/* line 104, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

#createBtn {
  margin-bottom: 20px;
  padding: 15px;
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
  background-color: #4180C5;
  color: aliceblue;
  text-decoration: none;
  font-size: 15px;
  cursor: pointer;
}


/* line 117, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

#createBtn:hover {
  background-color: black;
}


/* line 121, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

.buttonCreate {
  width: 30%;
  margin: 10px auto;
  display: block;
}


/* line 127, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */

#userNotificationForm {
  background-color: #fff;
  display: inline-block;
  text-align: left;
}

@import url("http://fonts.googleapis.com/css?family=Lato");

/* line 11, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */

.selectMenu {
  font-family: 'Oxygen', sans-serif;
  font-size: 20px;
  height: 50px;
  -webkit-appearance: menulist-button;
}


/* line 18, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */

.select-hidden {
  display: none;
  visibility: hidden;
  padding-right: 10px;
}


/* line 24, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #fff;
  width: 220px;
  height: 42px;
  margin-bottom: 20px;
  margin-top: 10px;
}


/* line 35, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */

.select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: gray;
  padding: 11px 12px;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}


/* line 44, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */

.select-styled:after {
  content: "";
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 16px;
  right: 10px;
}


/* line 54, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */

.select-styled:hover {
  background-color: #7b7b7b;
}


/* line 57, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */

.select-styled:active,
.select-styled.active {
  background-color: #737373;
}


/* line 59, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */

.select-styled:active:after,
.select-styled.active:after {
  top: 9px;
  border-color: transparent transparent #fff transparent;
}


/* line 66, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */

.select-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #737373;
  overflow: scroll;
}


/* line 81, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */

.select-options li {
  margin: 0;
  padding: 12px 0;
  text-indent: 15px;
  border-top: 1px solid #676767;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}


/* line 90, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */

.select-options li.selected {
  color: gray;
  background: #fff;
}


/* line 95, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */

.select-options li[rel="hide"] {
  display: none;
}


/* line 99, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */

ul.select-options {
  max-height: 15em;
  overflow-y: scroll;
  overflow-x: hidden;
}

相关问题
最新问题