CSS是前端开发中不可缺少的部分，它能够为HTML文档增加丰富的样式和交互效果。有时候我们需要为用户提供选择性别的功能，下面介绍如何使用CSS添加男女选项。

.select-box {display: inline-block;position: relative;padding: 0 40px 0 10px;line-height: 34px;font-size: 14px;color: #333;border: 1px solid #ccc;outline: none;cursor: pointer;background-color: #fff;box-sizing: border-box;}.select-box::after {content: '';position: absolute;top: 50%;right: 12px;transform: translateY(-50%);border-top: 6px solid #999;border-right: 4px solid transparent;border-left: 4px solid transparent;}.select-menu {display: none;position: absolute;top: 100%;left: 0;z-index: 999;padding: 8px 0;margin-top: 1px;border: 1px solid #ccc;border-top: none;background-color: #fff;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}.select-menu li {list-style: none;height: 34px;line-height: 34px;font-size: 14px;color: #333;padding: 0 10px;cursor: pointer;background-color: #fff;}.select-menu li:hover {background-color: #f4f4f4;}.select-box:focus+.select-menu,.select-box.active+.select-menu {display: block;}.select-menu li:hover,.select-menu li.selected {background-color: #f4f4f4;}.select-menu .gender-selection {display: inline-block;width: 12px;height: 12px;margin-right: 6px;border-radius: 50%;}.select-menu .male .gender-selection {background-color: #5caaff;}.select-menu .female .gender-selection {background-color: #f4588e;}

以上CSS代码中，我们创建了一个选择框和一个选项菜单。在选项菜单中，我们通过添加CSS样式，创建了两个“男女”选项，并为它们分别设置了背景颜色。

通过以上CSS代码，我们为用户提供了选择性别的功能，并能够展示漂亮的UI样式。