Question

我将这个html用于选择控件

{
  "name": "empty-project-template",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "add": "^2.0.6",
    "expo": "^30.0.1",
    "expokit": "1.7.1",
    "mobile-center": "^0.11.2",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
    "yarn": "^1.10.1"
  }
}

它已在chrome中按预期呈现

chrome图片1

chrome图片2

但是在IE中，选择选项在单击时隐藏了控件，或者换句话说，未从选择控件的底部打开选择选项，如以下屏幕截图所示

IE图片1

IE图片2

这是默认行为还是可以更改？我尝试使用此CSS进行赠送，但没有成功

<select class="form-control">
    <option value="0"></option>
    <option value="1: 1" >Jr.</option>
    <option value="2: 2">Sr.</option>
    <option value="3: 3">I</option>
    <option value="4: 4">II</option>
    <option value="5: 5">III</option>
</select>

有什么建议吗？

Answer 1

这是标准行为。每个浏览器呈现的元素都略有不同，并且具有自己的样式。某些样式可以更改，另一些样式则隐藏在元素的阴影根中，无法更改。可悲的是，该选项只有几种样式可以设置，例如颜色...

一个解决方案是隐藏select元素，并通过另一个可以设置样式（例如span）和JavaScript的元素来控制它。那不是真的很漂亮，但是许多css框架已经这样做了，并且如果您绝对必须使它看起来不错（大多数情况下是这样），那是您唯一的选择。

Answer 2

这是一个自定义选择框的快速示例。如您所见，现在甚至可以将图像放入选项中。希望对您有帮助。

Fontawesome用于插入符号。 JS源代码中的文档。

// Create a reference to the select box
const selectBox = document.getElementById("selected");
// Add an event listener to detect the click and make the options (in)visible
selectBox.addEventListener("click", function() {
  // Add or remove class 'open'
  document.getElementById("options").classList.toggle("open");
});

// Put all options in an array
const options = [...document.getElementsByClassName("option")];
// Add event listener for each option
options.map( option => option.addEventListener("click", function() {
  // Create a reference to the input field
  const myInput = document.getElementById("sel");
  // Retrieve the text from the clicked option
  const optionText = this.getElementsByTagName("span")[0].innerHTML;
  // Put the text in the input field value
  myInput.value = optionText;
  // Put the text in the select box
  selectBox.innerHTML = optionText;
  // Close the select box
  document.getElementById("options").classList.toggle("open")
}));

.container {
  display: flex;
  flex-wrap: wrap;
  width: 25%;
}

#selected {
  border: thin solid darkgray;
  border-radius: 5px;
  background: lightgray;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 1.5em;
  margin-bottom: .2em;
  padding-left: .5em;
  min-width: 150px;
  position: relative;
}

#selected:after {
  font-family: FontAwesome;
  content: "\f0d7";
  margin-left: 1em;
  position: absolute;
  right: .5em;
}

#options {
  display: none;
  margin: 0;
  padding: 0;
}

#options.open {
  display: inline-block;
}

li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

li>img {
  margin-right: 1em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
  <input type="hidden" id="sel">
  <div class="container">
    <div id="selected">Select an option</div>
    <ul id="options">
      <li class="option"><img src="http://placehold.it/50/00ff00"><span>Option 1</span></li>
      <li class="option"><img src="http://placehold.it/50/ff0000"><span>Option 2</span></li>
      <li class="option"><img src="http://placehold.it/50/0000ff"><span>Option 3</span></li>
    </ul>
  </div>
</form>

Answer 3

您可以使用CSS纠正行为

static void Main(string[] args)
{
    var numbers = new int?[5];

    for (int i = 0; i < 5; i++)
    {
        Console.WriteLine($"Please enter number {i+1}.");

        do
        {
            int n;
            while (!int.TryParse(Console.ReadLine(), out n))
                Console.WriteLine("Invalid number. Please try again.");

            var currentNumber = Convert.ToInt32(n);
            var containsNumber = numbers.Contains(currentNumber);

            if (!containsNumber)
            {
                numbers[i] = currentNumber;
                break;
            }

            Console.WriteLine("Number was entered previously, please enter a different number.");
        } while (true);


    }

    Console.Clear();
    Array.Sort(numbers);

    foreach (int? n in numbers)
        Console.WriteLine(n);

    Console.ReadLine();
}

select {
  float: left;
  display: inline-block;
}

IE11中的HTML选择菜单问题

3 个答案: