I am struggling with an unordered list where each list item contains an input element, and I am using Bootstrap framework.
Let me share my code snippet:
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul>
<li class="check-item">
<input type="text" class="form-control" placeholder="Enter something">
</li>
</ul>
</body>
</html>
The issue I am facing is that the bullet point of the li element is not appearing outside of the input field in Safari as it does in Chrome. In Safari, the bullet point only shows up when double-clicked and overlaps the input.
This problem seems to be related to Bootstrap, as without it, I do not face this issue.
I have attempted to fix this by adding the following CSS:
<style>
ul {
list-style-position: outside;
}
</style>
However, the problem persists. Can someone explain why this discrepancy exists between Chrome and Safari? And if there's a solution to make it work consistently across browsers?